Question

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

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

还有其他人遇到过同样的问题吗？

Answer 1

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

Answer 2

贝。在我看来，这个技巧的关键点是你必须修复iframe的高度。然后，您可以将iscroll应用于iframe中的任何div元素。这是一个小代码片段：

    // 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。

Answer 3

我试图在我的应用程序WebView中显示一个Iframe，我遇到的问题是无法使用CSS切断我的iframe的底部30px＆＃39;溢出：隐藏;＆＃39;。我解决这个问题的方法是制作我自己的index.html文件并将其作为资产保存在我的应用程序中。

如果您没有资产＆＃39;项目中的文件夹，转到步骤1

（这与＆＃39; res＆＃39;文件夹不同）

[在Windows 7上]

第1步 - 制作资源文件夹：在Android Studio项目中，点击：

文件 - ＆gt;新 - ＆gt;文件夹 - ＆gt;资产文件夹

Image showing how to make assets folder in Windows

第2步 - 制作将0纳入<iframes>的index.html 您可以复制以下代码，以用作index.html文件中的示例代码：

<div>

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

注意 - （此示例的ID是＆＃39; main_ad＆＃39;，将此ID更改为您为webviews ID命名的内容）

<!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>

希望这可以帮助一个使用webview和iframe的人

Answer 4

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

例如：

android:layout_height="match_parent"

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

Webview iframe溢出

4 个答案: