Fatal编程技术网
  • iphone/
  • Appcelerator:iPhone上带有iFrame和宽度的Webview

Appcelerator:iPhone上带有iFrame和宽度的Webview

iphone webview

Appcelerator:iPhone上带有iFrame和宽度的Webview,iphone,webview,appcelerator,appcelerator-mobile,Iphone,Webview,Appcelerator,Appcelerator Mobile,晚上好, 我对一个内部有webview的视图有一些问题。webview正在插入带有外部源（另一个域上的html）的iframe。我使用iframe是因为我需要使用外部HTML，并且我需要与我的应用程序的点击/触摸事件进行通信 主要问题是webview插入了不需要的水平滚动条（因为iframe内容太大） 代码如下所示： 网络视图： var webview = Titanium.UI.createWebView({ url: "/html/local.html", width:Ti.

晚上好,

我对一个内部有webview的视图有一些问题。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);

<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>
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);

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


函数init（）{
window.theIframe.TiAPI=Ti.API；
window.theIframe.TiApp=Ti.App；
}
正文{宽度：100%；边距：0；填充：0；背景色：#ccffff；}
注意事项：

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);

<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的滚动。

例如：

<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包装在div中：

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

这不能正常工作。我结束了在外部文件上使用媒体查询，效果非常好。