Question

我已将一个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内容根本没有显示。

Answer 1

请尽量不要使用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

Answer 2

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

所以解决方案是for met to

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

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

JQuery Mobile中的iFrame没有显示

2 个答案: