我已将一个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内容根本没有显示。
答案 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')
即使这个年龄较大也许对某人有帮助。