Appcelerator。在iPhone上使用iFrame和宽度的Webview[英] Appcelerator: Webview on iPhone with an iFrame and width

本文是小编为大家收集整理的关于Appcelerator。在iPhone上使用iFrame和宽度的Webview的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

晚上好,

我一直在有一些存在的问题,其中包含WebView. WebView正在使用外部源(另一个域上的HTML)插入iframe.我正在使用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%;
    }

本文地址:https://www.itbaoku.cn/post/1938203.html

问题描述

Good evening,

I've been having some issues with a view that has a webview inside. The webview is inserting an iframe with an external source (an html on another domain). I'm using an iframe since I need to use the external HTML and I need to communicate with click/touch events with my application.

The main issue is that the webview is inserting unwanted horizontal scroll bars (because the iframe content is too big)

The code looks like:

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>

Things to notice:

  • This only happens on portrait. It works fine on the iPad or on the iPhone with landscape view.
  • If, under the external html, I set the max-width for the body to 320px it works perfectly. I won't make it this way because I need it to work under landscape and iPad.
  • If I use the external html as the URL for the webview, it works too. So it's not an issue with the external content, but with the local html or the webview and the iframe.

Any thought?

推荐答案

I ended using media queries on the external file and that works pretty well.

其他推荐答案

Maybe in the local HTML file you could turn scrolling off for the iframe. http://www.w3schools.com/tags/att_iframe_scrolling.asp

For example:

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

其他推荐答案

I also came across the same problem and actually managed to find a solution

I have no idea why this happens in the first place, but if you want the actual container width on the iframe use this CSS instead:

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