Set or change iframe source using jquery

This example shows you how to set the iframe source(src) using jquery and how to change the iframe source dynamically. In this example a dropdown contains list of page urls, when you select the page url from the dropdown it will be loaded in the iframe by assigning the src using jquery.

Syntax

$("#ifrm").attr("src", pageurl);

Example
Page Source


Source code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script language="javascript"> $(document).ready(function () { $("#ddlsource").on("change", function () { var pageurl = $(this).val(); $("#ifrm").attr("src", pageurl); }); }); </script> </head> <body> Page Source<br /> <select id="ddlsource"> <option value="">Select</option> <option value="/angularjs"> AngularJS Tutorial</option> <option value="/linq">Linq Tutorial</option> <option value="/">Home</option> </select> <br /> <br /> <iframe id="ifrm" height="500" width="500" scrolling="auto"></iframe> </body> </html>