iFrame in JQuery Mobile not showing

Question

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.

Solution 1

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

Solution 2

I actually got the exact same problem but since the content is loading from my own server I am sure about the headers set. The actual problem seams to be that the height or width is not set correctly (at least on my iPad) this means that setting it to a specific value after the iFrame is displaying causes a redraw and the iFrame data shows up.

So the solution was for met to

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

Even though this is older maybe it helps someone.