How to load an external webpage into a div of a html page

Question

I need to load a responsive website into a div in my HTML page without using an iframe element.

I have tried this link; it's working for a single page URL, which I mentioned in the script.

$('#mydiv').load('http://localhost/qa/ask#external-div', function(response, status, xhr) {     if (status == "error") {         var msg = "Sorry but there was an error: ";         alert(msg + xhr.status + " " + xhr.statusText);       } }); 

Answer 1

Using simple html,

 <div>      <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">     </object>  </div> 

Or jquery,

<script>         $("#mydiv")             .html('<object data="http://your-website-domain"/>'); </script> 

JSFIDDLE DEMO

Answer 2

As mentioned in this stackoverflow thread, difference between iframe, embed and object elements

You can use <embed> tag, instead of <object> tag. If you require communication between child and parent.

† As pointed out in the comments below; scripts in <object> will run but the parent and child contexts can't communicate directly. With <embed> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <object> or <iframe> where you would have to set up some other mechanism instead, such as the JavaScript postMessage API.

<embed type="text/html" src="snippet.html" width="500" height="200">