How to load external webpage inside div using jquery

Last updated on October 4th, 2022 at 02:29 pm

Very simple tutorial on loading an external webpage content in to div using simple jQuery technique. Here I am loading an HTML page named change_button_color.html that will change the color on click.

We have a div with id links. HTML page change_button_color.html gets loaded inside this div

Here is the code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="links">Loading Links...</div>
<script type="text/javascript">
$(document).ready(function()
{
    var refreshId = setInterval( function()
    {
$('#links').load("change_button_color.html");
}, 6000);
});
</script>

The above script will read and load the webpage every 6 seconds. Modify the time interval as per your requirement.

Demo