Webview iframe 溢出答案

【问题标题】：Webview iframe overflowWebview iframe 溢出
【发布时间】：2011-04-14 11:26:00
【问题描述】：

我目前正在 android 中构建一个网络应用程序。我的应用在 webview 中运行，并通过 iframe 加载第三方内容。 iframe 大小是固定的，不应被加载的内容更改。

在桌面 Chrome 浏览器中，它工作正常，加载内容的溢出部分可以通过滚动条滚动。然而，在android webview中，iframe往往会根据加载的内容调整自己的大小，从而导致页面布局混乱。

有没有人遇到过同样的问题？

【问题讨论】：

标签： android iframe webview overflow

【解决方案1】：

为 WebView 及其父级设置固定尺寸或全尺寸高度

例如：

android:layout_height="match_parent"

更新：如果 Webview 父级是滚动条，请将其删除

【讨论】：

【解决方案2】：

我试图在我的应用程序 WebView 中显示一个 iframe，但我遇到了无法使用 CSS 'overflow:hidden;' 切断 iframe 底部 30 像素的问题。我解决这个问题的方法是制作我自己的 index.html 文件并将其作为资产保存在我的应用程序中。

如果您的项目中没有“资产”文件夹，请转到第 1 步

（这与“res”文件夹不同）

[在 Windows 7 上]

第 1 步 - 创建 assets 文件夹：在您的 Android Studio 项目中点击：

文件 --> 新建 --> 文件夹 --> 资产文件夹

Image showing how to make assets folder in Windows

第 2 步 - 将 index.html 用于在 <div> 中保存您的 <iframes> 您可以复制以下代码以用作 index.html 文件中的示例代码：

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body style="margin:0px;">
        <div style="width:605px;height:875px;overflow:hidden;">
           <iframe src="https://docs.google.com/presentation/d/1QyNNURCVBme50SAuIceq3sh7Ky74LuWNeEM8B910aC4/embed?start=true&loop=true&delayms=2000" scrolling="no" frameborder="0" width="605" height="905" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
        </div>
    </body>
</html>

第 3 步 - 在您的 WebView 中调用 index.html 文件

注意--（此示例 WebView 的 ID 为“main_ad”，将此 id 更改为您命名的 webview id）

WebView webView = (WebView) findViewById(R.id.main_ad);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("file:///android_asset/index.html");  //this is why you needed the assets folder
webView.getSettings().setJavaScriptEnabled(true);

希望这甚至可以帮助 1 个人使用 webviews 和 iframe

【讨论】：

【解决方案3】：

我找到了避免这个讨厌问题的方法。我已经禁用了 iframe 的滚动条，而是在应用程序中使用 iscroll。这个滚动条与原来的滚动条几乎相同，但在我的 HTC Magic 手机上速度较慢。

【讨论】：

记得将答案标记为正确答案 - 这将有助于未来的搜索者。

【解决方案4】：

托尼。在我看来，这个技巧的关键在于你必须固定 iframe 的高度。然后您可以将 iscroll 应用到 iframe 中的任何 div 元素。这是一个小代码sn-p：

    // disable default touchmove handler
    document.addEventListener('touchmove', function(e){
        e.preventDefault();
    });
    // make the div 'list' scrollable
    var myScroll = new iScroll('list'); // <div id='list'>Blah</div>

我在代码中使用了jQuery，它与 iScroll 配合得很好。

【讨论】：