How to show web page nested in div?

Question

I have simple HTML code,

<div id="overlay">
        <div>
            <p>Content you want the user to see goes here.</p>
            Click here to [<a href='#' onclick='overlay()'>close</a>]
         <div>
             <object type="text/html" data="http://google.com"></object>
         </div>
        </div>
</div>

I get error as,

This content cannot be displayed in a frame

How to show webpage inside div?

score 2 · Accepted Answer · answered Oct 07 '14 at 05:50

2

www.google.com and other sites use a X-Frame-Options HTTP header that specifies that embedding is only allowed from the same origin:

x-frame-options:SAMEORIGIN

Browsers respect this header and prevent you from embedding the site

answered Oct 07 '14 at 05:50

Amit Portnoy

5,957
2
29
30

Girish · Answer 2 · 2014-10-07T05:54:45.073

0

You should use <iframe> to show page inside page

<iframe src="http://example.com"></iframe>

edited Oct 07 '14 at 05:54

answered Oct 07 '14 at 05:47

Girish

11,907
3
34
51

`google` is restrict load content inside `` due to `CORS` policy try another site – Girish Oct 07 '14 at 05:53

score 0 · Answer 3 · edited May 23 '17 at 12:27

The reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

The X-Frame-Options response header

Here is work around;

Working Fiddle

<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>

Here is an other workaround to overcome your problem;

How to load website HTML using jquery?

good luck!

How to show web page nested in div?

3 Answers3

Linked