Menu
On my localhost, I am using the following JavaScript to create an iframe with src, and add it to the document:
$('#preview').html('<iframe src="http://google.com/"></iframe>');
The iframe shows but not the content. In firebug, it's just:
<iframe src="http://google.com/">
<html>
<head></head>
<body></body>
</html>
</iframe>
When I execute $('iframe').attr('src','http://google.com/'); on the console, the browser loads (says "Waiting for google.com..."), then seems to refresh the content of the iframe. But again, it's empty.
If I set it to a local page, though, the content is loaded.
Is this because of the same origin policy? I'm not so informed about it. I did some googling and I'm confused because some sites say that it's okay to include an iframe with src that doesn't belong to your own domain, and some say it's not possible.
By the way, since I'm still testing on localhost, would this work if I uploaded this to a server somewhere? (but src of iframe will still be in a different domain)
Help?
296
If the primary domain for your website is secure with SSL (https://) but the source URL for your Iframe is not, your website will display an error, or simply not display the content. To fix this, you'll need to update the Source URL for your Iframe content with the secure (https://) version.
If a user has javascript disabled, iframes will work. An iframe tag has attributes “height” and “width,” which allows the designer great latitude with dimensions and format like 300×250 , 728×90 depending on the Ad size. Iframe tag can appear anywhere on the page and several iframes can be added if wished to.
The contentDocument property returns the Document object generated by a frame or iframe element. This property can be used in the host window to access the Document object that belongs to a frame or iframe element.
Deprecated AttributesSome attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed completely. img and iframe.
If you'd checked your browser's error console, you'd have seen this message:
Refused to display document because display forbidden by X-Frame-Options.
So, this isn't an error on your part, but a deliberate action on the part of Google.
The two options for the X-Frame-Options are:
deny - no rendering within a frame, andsameorigin - no rendering if origin mismatchReferences:
X-Frame-Options response headers, at MDN.X-Frame-Options at Wikipedia.
62
Yes the code is forbidden because of same origin policy. Read here
Suppose you own the domain http://www.example.com then you can probably have following results, when you call pages through iframes:
Compared URL Outcome Reason
---------------------------------------------------------------------------------------------
http://www.example.com/dir/page.html Success Same protocol and host
http://www.example.com/dir2/other.html Success Same protocol and host
http://www.example.com:81/dir2/other.html Failure Same protocol and host but different port
https://www.example.com/dir2/other.html Failure Different protocol
http://en.example.com/dir2/other.html Failure Different host
http://example.com/dir2/other.html Failure Different host (exact match required)
http://v2.www.example.com/dir2/other.html Failure Different host (exact match required)
Now, you are calling google.com, which is a cross domain issue upon you. To get around such a problem, JSONP can help you out. It uses open script policy for <script>, to retrieve JSON from cross domains.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
