iFrame в JQuery Mobile не отображается

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/, но другой URL, я не знаю, куда вы действительно хотите сослаться?

Когда я меняю 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

Answer 2

У меня фактически та же самая проблема, но так как контент загружается с моего собственного сервера, я уверен в наборе заголовков. Фактическая проблема заключается в том, что высота или ширина установлены неправильно (по крайней мере, на моем iPad), это означает, что установка определенного значения после отображения iFrame вызывает перерисовку, и отображаются данные iFrame.

Таким образом, решение было выполнено для

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

Даже если это старше, может быть, это кому-то поможет.