jQuery Mobile中的iFrame不显示 [英] iFrame in JQuery Mobile not showing

问题描述

我已将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内容根本不显示.

解决方案

请不要使用 http://www .google.com/，但另一个网址，我不知道您真正想在哪里引用?

当我将src更改为 http://www.msn.com 时，它可以很好地工作

它与X-Frame-Options有关.在Google Chrome浏览器中，我收到以下消息:拒绝显示文档，因为X-Frame-Options禁止显示.

您可以通过设置HTTP标头X-Frame-Options来进行操作.也可以看看: 克服"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

I have added an iframe to a JQuery Mobile page:

The link to it:

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

The problem is that I get just the header and footer of the page ... the iFrame content is not displaying at all.

解决方案

Please try not to use http://www.google.com/ but another URL, I do not know where you really want to refer to?

When I change the src to http://www.msn.com it works perfectly fine

It has something to do with X-Frame-Options. In Google Chrome I get the following message: Refused to display document because display forbidden by X-Frame-Options.

You can manipulate this by setting the HTTP header X-Frame-Options. See also: Overcoming "Display forbidden by X-Frame-Options"

Most likely Google sends a DENY or SAMEORIGIN and thats why it is not working
Edit: checked with Fiddler and Google has the following headers:

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

这篇关于jQuery Mobile中的iFrame不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！