IFrame in jQuery Mobile not showing

I added an iframe to the jQuery Mobile page:

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 only get the page header and footer ... the contents of the iFrame are not displayed at all.

+3
source share
2 answers

Do not try to use http://www.google.com/ , but a different URL, I don’t know what you really want to link to?

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

This has something to do with X-Frame-Options. In Google Chrome, I get the following message: Failure to display a document because display is not allowed using X-Frame-Options.

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

Most likely, Google sends DENY or SAMEORIGIN, and therefore it does not work
Edit: verified using 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 
+3
source

I really had the same problem, but since the content is being downloaded from my own server, I am sure that the set of headers. The actual problem is that the height or width is not set correctly (at least on my iPad), which means that setting it to a specific value after displaying the iFrame causes the redraw and iFrame data.

Thus, the decision was made for

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

Even if it's older, maybe it helps someone.

+2
source

Source: https://habr.com/ru/post/1500654/


All Articles