How to load an external webpage into a div of a html page
JqueryWebJquery Problem Overview
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);
}
});
Jquery Solutions
Solution 1 - Jquery
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>
Solution 2 - Jquery
As mentioned in this stackoverflow thread, https://stackoverflow.com/questions/16660559/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">