content of dynamically created iframe is empty

Question

On my localhost, I am using the following JavaScript to create an iframe with src, and add it to the document:

$(\'#preview\').html         


        

Answer 1

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.

Answer 2

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, and
• sameorigin - no rendering if origin mismatch

References:

• X-Frame-Options response headers, at MDN.
• X-Frame-Options at Wikipedia.
• Overcoming "Display forbidden by X-Frame-Options" (here on Stack Overflow).