Dynamically Changing the iframe src in jQuery

Filed in Html | jquery 1 Comment

This little function allows you to dynamically change the content of an iframe, using jQuery and javascript. It is perfect if you have a single page where you want to preview other websites without navigating away. To pull this off, you need a textbox, a link, and an iframe:

Enter website url below:<br/>
<input type="text" value="http://www.google.com" name="ifrmSite" id="ifrmsite"/> <a href="#" onclick="Navigate()">Navigate</a>
<br /><br />
<iframe name="iframe1" id="iframe1" src="http://www.google.com" width="600" height="700" scrolling="auto">
</iframe>

Next we add the javascript:

function Navigate() {
var newurl = $('#ifrmSite').val();
$('#iframe1').attr('src', newurl);
window.frames["iframe1"].location.reload();
}

And we’re done!

, ,

TOP