Webview iframe溢出

我目前在android中构build一个web应用程序。 我的应用在webview中运行,并通过iframe加载第三方内容。 iframe的大小是固定的,不应该被加载的内容改变。

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

有没有其他人遇到同样的问题?

Solutions Collecting From Web of "Webview iframe溢出"

托尼。 在我看来,这个技巧的关键是你必须修复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一起工作的很好。

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

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

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

(这和“res”文件夹不一样)

[在Windows 7上]

第1步 – 制作资产文件夹:在您的Android Studio项目中,单击:

文件 – >新build – >文件夹 – >资产文件夹

显示如何在Windows中创build资产文件夹的图像

第2步 – 使index.html,将您的<iframes>在一个<div>您可以复制下面的代码作为您的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是什么你命名你的webviews 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和iframes