Question

晚上好，

我一直在查看内部有webview的视图。 webview正在插入一个带有外部源的iframe（另一个域上的html）。我正在使用iframe，因为我需要使用外部HTML，我需要通过我的应用程序与点击/触摸事件进行通信。

主要问题是webview插入不需要的水平滚动条（因为iframe内容太大）

代码如下：

网页视图：

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。

有什么想法吗？

Answer 1

也许在本地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>

Answer 2

我也遇到same problem，实际上找到了解决方案

我不知道为什么会出现这种情况，但是如果你想在iframe上使用这个CSS，请使用这个CSS：

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

Answer 3

我最终在外部文件上使用媒体查询，效果非常好。

Answer 4

这里回答：iframe size with CSS on iOS

只需将iframe包装在div中：

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

http://jsfiddle.net/R3PKB/7/

Appcelerator：iPhone上的Webview，带有iFrame和宽度

4 个答案: