Menu ▼



Posted By :
avatarmrkraju
Total Views : 598

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="http://dotnetlearners.com/tutorial/angularjs/17/angularjs-tutorial-introuduction-to-angularjs">
            AngularJS Tutorial</option>
        <option value="http://dotnetlearners.com/stats.aspx">Stats</option>
        <option value="http://dotnetlearners.com/home.aspx">Home</option>
    </select>
    <br />
    <br />
    <iframe id="ifrm" height="500" width="500" scrolling="auto"></iframe>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com