This tutorial shows you how to dynamically load webpages in an iFrame using jQuery. Basically loading pages in an iframe using AJAX.
Its simple, use ‘attr()’ function to load pages. Here is an example show below:
|
1 |
$("#iframeid").attr("src", "http://yourpage.com"); |
Its is always better if you have an example to learn how it is working. So, here it is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("#button").click(function () { $("#frame").attr("src", "http://blog.theonlytutorials.com"); }); $("#button2").click(function () { $("#frame").attr("src", "http://www.royaltalkies.com"); }); }); </script> </head> <body> <div id="mydiv"> <iframe id="frame" src="" width="60%" height="300"></iframe> </div> <button id="button">Web Page 1</button> <button id="button2">Web Page 2</button> </body> </html> |
Basically two buttons are used in this example, button and button2 are the id’s respectively. OnClick of button will load the webpage “blog.theonlytutorials.com” and button2 will load the web page “www.royaltalkies.com” in the IFRAME.
Load web pages in an iframe using jQuery DEMO:
