JQuery Mobile中的iFrame没有显示

时间:2011-11-13 10:01:21

标签: jquery jquery-mobile

我已将一个iframe添加到JQuery Mobile页面:

指向它的链接:

<a href="#testit" data-icon="search" rel="external">Got to iFrame Page</a>

<!--test iframe page-->

<div data-role="page" id="testit">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <iframe src="http://www.google.com" width="100%" height="100%">
            <p>Your browser does not support iframes.</p>
        </iframe>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<!--end test iframe-->

问题是我只得到页面的页眉和页脚... iFrame内容根本没有显示。

2 个答案:

答案 0 :(得分:3)

请尽量不要使用http://www.google.com/,而是使用其他网址,我不知道您真正想要引用的位置?

当我将src更改为http://www.msn.com时,它的效果非常好

它与X-Frame-Options有关。在谷歌浏览器中,我收到以下消息:拒绝显示文档,因为X-Frame-Options禁止显示。

您可以通过设置HTTP标头X-Frame-Options来操纵此操作。也可以看看: Overcoming "Display forbidden by X-Frame-Options"

Google最有可能发送DENY或SAMEORIGIN,这就是为什么它不起作用
编辑:与Fiddler核对,Google有以下标题:

HTTP/1.1 200 OK
Date: Mon, 14 Nov 2011 20:25:29 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Server: gws
Content-Length: 18112
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN

答案 1 :(得分:2)

我实际上遇到了完全相同的问题,但由于内容是从我自己的服务器加载的,所以我确定要设置的标头。 实际问题是高度或宽度设置不正确(至少在我的iPad上)这意味着在iFrame显示后将其设置为特定值会导致重绘并显示iFrame数据。

所以解决方案是for met to

$('.html-content').css('height', '768px')

即使这个年龄较大也许对某人有帮助。