How to open Third Party in div

Question

The below code not proper working as i wants, Anyone knowns about this issue why it happening. i want open external website on our website body div .

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">jQuery 3.1.1</a> 
    
    <style >
        #content{height:250;width:500px;}

    #content object{height:100%;width:100%;}

    </style>

    <script >$(document).ready(function(){ 
    $('a').on("click", function(){
    event.preventDefault();
   
    
    // Load External pages.

    $("#content").html('<object data="'+this.getAttribute('href')+'" />');
    });
    });</script>

 
```Html Code```

    <a href="https://www.google.com">Google</a>
    <div id="content"></div>

</body>
</html>

score 0 · Answer 1 · answered Dec 23 '20 at 20:50

Do you want to use iframes?

The HTML Inline Frame element "iframe" represents a nested browsing context, embedding another HTML page into the current one.

<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">

score 0 · Answer 2 · edited Dec 23 '20 at 20:57

Not every site can be loaded in a frame if they are not on the same origin, for example in your case google.com sets X-Frame-Options (a header) as sameorigin.

There's no way to bypass it unless you are making this for a chrome extension where you'd have to modify the response to remove X-Frame-Options header and everything would work fine.

You could read more about X-Frame-Options, from here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

If you want to know about how to remove X-Frame-Options if you are making a chrome extension, Getting around X-Frame-Options DENY in a Chrome extension?

How to open Third Party in div

2 Answers2