如何在 Android webview 中居中我的 HTML iframe？答案

【问题标题】：How I center my HTML iframe in Android webivew?如何在 Android webview 中居中我的 HTML iframe？
【发布时间】：2022-01-08 04:12:15
【问题描述】：

我的 Android webview 中有一个 iframe，我正在像这样加载：

     String folderPath = "file:android_asset/";
     String fileName = "index.html";
     String file = folderPath + fileName;
     webView.loadUrl(file);

iframe 是通过位于我的android/assests 文件夹中的 HTML 和 CSS 文件加载的。 HTML 和 CSS 看起来像这样。 HTML：

<!DOCTYPE html>
<html lang="en">
<body>
<link rel="stylesheet" type="text/css" href="default.css"  />
    <div class="abs-frame-container">
    <iframe 
      id="my_frame"
      src="my web page link"
      scrolling="no"
      allowtransparency="true" 
      style="border:none;overflow:hidden">
    </iframe>
    </div>
</body>
</html>

和我的 CSS

#my_frame {
  position: absolute;
  top: 0%;
  bottom: 0%;
  right: 0%;
  width: 117%;
  height: 100%;
}

#abs-frame-container{
    top: 10%;
    bottom: 0%;
    position: relative;
}

iframe 中的网页在 webview 中显示良好。我想在 webview 中居中（垂直对齐）我的 iframe，以便它根据 webview 尺寸（高度）自动对齐。如果有人可以帮助我如何实现这一点，将不胜感激？

【问题讨论】：

标签： javascript android html css android-webview

【解决方案1】：

您可以直接从 Java/Kotlin 调用 WebView 上的自定义 JavaScript。在the official documentation中有解释。

然后您可以将JavaScript script that adds CSS styles 设置为已加载的html 页面的一部分，并以此方式将您的iframe 居中。

【讨论】：

感谢您的建议。所以我已经拥有的 CSS 文件不足以解决问题？
没有直接的方法可以从 android 代码中应用 css 文件。但是，如果您已经拥有所需的 css，那么将其“翻译”为 javascript 应该不难。我在答案中附上了一个链接，并附有一些示例。