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

【问题标题】：Appcelerator: Webview on iPhone with an iFrame and widthAppcelerator：iPhone 上带有 iFrame 和宽度的 Webview
【发布时间】：2012-10-26 01:21:20
【问题描述】：

晚上好，

我在使用内部包含 web 视图的视图时遇到了一些问题。 webview 正在插入一个带有外部源（另一个域上的 html）的 iframe。我正在使用 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 下，我将 body 的最大宽度设置为 320px，它可以完美运行。我不会这样做，因为我需要它在横向和 iPad 下工作。
如果我使用外部 html 作为 webview 的 URL，它也可以工作。所以这不是外部内容的问题，而是本地 html 或 webview 和 iframe 的问题。

有什么想法吗？

【问题讨论】：

标签： iphone webview appcelerator appcelerator-mobile

【解决方案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>

【讨论】：

这不能正常工作。我结束了对外部文件的媒体查询，效果很好。

【解决方案2】：

我也遇到了same problem 并且实际上设法找到了解决方案

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

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

【讨论】：

【解决方案3】：

我结束了对外部文件使用媒体查询，效果很好。

【讨论】：

【解决方案4】：

这里有答案：iframe size with CSS on iOS

只需将您的 iframe 包装在一个 div 中：

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

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

【讨论】：