In this tutorial I’m going to show you how to load an external website into a div using jQuery and a simple HTML code. And definitely I’m not going to use iframe here. Yes, no <iframe> but using <object> it is possible to load any external website. Many of us still don’t know this because we are not using <object> tag much.
Lets see an example to load an external website with the help of <object> tag and jQuery:
$('#exweb').html('<object id="webloader" data="http://blog.theonlytutorials.com"/>');
margin: 0 auto;
<h3 align="center">Demo of how to load an external website with a simple jQuery function! - Tutorial by <a href="">tutorialsmade.com</a></h3>
<!-- load a website into this div -->
Copy paste the above code in a notepad and then save it as a html page to test it.
5 thoughts on “Learn how to load an external website with jQuery!”
Hello. That was really very helpful. What if I had two div on my main page. One for my menu. And other for my content. If a user clicks on one of the links in the menu. The file loads into the content div. Please I need your help.
How this code handles errors; for instance what happens when the xternal website is not available ? how do you handle this ?
Thank you man, you save me 🙂
Script work fine
But i need to set delay like 60 seconds before external page will be loaded like settimeout.
how can i do it ?
please help me
This doesn’t actually load the html of the external page into your page. If you look at the source of the rendered page, it contains and empty div in place of the external page. This solution won’t work, if you’re trying to style the external page with css.