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.

Answer 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