Website Scripts And Cloud Tutorials

Load web page dynamically inside Iframe using Javascript

Byadmin

Dec 20, 2011

Last updated on May 23rd, 2016 at 04:57 pm

Click to rate this tutorial!
[Total: 2 Average: 5]

Load web page dynamically inside Iframe using Javascript

Load webpage dynamically from URI using simple javascript and Iframe, this is very simple and easy to approach. You can pass the URI as a query string. Check DEMO for more details.

For example here I have an IFRAME code which load readme.php page inside a main page named load_iframe_uri.php.

<iframe src="readme.php" WIDTH="400" HEIGHT="400" name="web_page" id="load_me"></iframe>

But you need to load another web page say secframe.htm inside the same IFRAME, You can do that by adding this Javascript code to the web page load_iframe_uri.php.

window.onload = function setIframe() {
var url = window.location.href;
var uri = url.indexOf("?uri=");
if( uri>-1 ) {
url = url.substr(uri+5);
document.getElementById("load_me").src = url;
}
}

I think here there is nothing much to explain here. If you have any doubts do comment and I will try to clear it out :-).

URL WILL BE SOMETHING LIKE www.mywebsite.come/myframe.htm?uri=another_page.php
DEMO

Click to rate this tutorial!
[Total: 2 Average: 5]

Leave a Reply

Your email address will not be published.