AppCelerator:iPhone上的WebView具有iframe和宽度

晚上好，

我一直在内部具有WebView的视图中遇到了一些问题。WebView正在插入带有外部源的iframe（另一个域上的HTML）。我使用的是iframe，因为我需要使用外部HTML，并且需要与应用程序进行点击/触摸事件进行通信。

主要问题是WebView正在插入不需要的水平滚动条（因为iFrame内容太大）

代码看起来像：

WebView：

var webview = Titanium.UI.createWebView({
    url: "/html/local.html",
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    contentWidth:Ti.UI.SIZE,
    contentHeight:Ti.UI.SIZE,
    disableBounce:true,
    enableZoomControls: false
});
self.add(webview);

iframe：

<html>
    <head>
        <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
        <meta http-equiv="cleartype" content="on">
        <script>
            function init () {
                window.theIframe.TiAPI = Ti.API;
                window.theIframe.TiApp = Ti.App;
            }
        </script>               
        <style>
            body {width:100%;margin:0;padding:0;background-color:#ccffff;}
        </style>
    </head>
    <body>
        <iframe name="theIframe" src="http://external.com/something.html" width="100%" height="100%" frameborder="0" onload="init()">
        </iframe>
    </body>
</html>

要注意的事情：

这仅发生在肖像上。它在iPad上或带有风景视图的iPhone上正常工作。
如果在外部HTML下，我将身体的最大宽度设置为320px，则可以很好地工作。我不会这样做，因为我需要它在景观和iPad下工作。
如果我将外部HTML用作WebView的URL，它也可以工作。因此，这不是外部内容的问题，而是本地HTML或WebView和Iframe。

任何想法？

也许在本地HTML文件中您可以关闭滚动iframe。http://www.w3schools.com/tags/att_iframe_scrolling.asp

例如：

<html>
<head>
</head>
<body>
<iframe src="http://www.yahoo.com.au" scrolling="no"></iframe>
</body>

我也遇到了相同的问题，实际上设法找到了一个解决方案

我不知道为什么首先会发生这种情况，但是如果您想要iframe上的实际容器宽度，请使用此CSS：

    iframe {
        min-width: 100%; 
        width: 100px;
        *width: 100%;
    }

我使用外部文件上的媒体查询结束，并且效果很好。

它在这里回答：iFrame大小，iOS上的CSS

只需将您的iframe包裹在Div中：

overflow: auto;
-webkit-overflow-scrolling:touch;

http://jsfiddle.net/r3pkb/7/

相关内容

最新更新

热门标签：