JavaScript

Javascript Frame Example

The aim of this tutorial is to describe and demonstrate using JavaScript to manipulate and interact with iframes, showing how to access and modify properties of the iframe element, how to communicate with the document inside the iframe, getting information from the iframe and passing information to it.

Iframes, or inline frames, allow you to load separate HTML files into an existing document.Iframes can be placed anywhere in the html document.

JavaScript can be used to manipulate the appearance and properties of the iframe element , its position, size, and src, for example. JavaScript can also be used to pass data between the html document containing the iframe and the iframe itself.
 

1. HTML

First of all you need to create two simple html documents.

iframeExample.html

<!DOCTYPE html>
<html>
<head>
	<title>Javascript IFrame Example</title>
</head>
<body>

</body>
</html>

2. Javascript IFrame Example

2.1 Change iframe src by using javascript

Let us add the following html code to our page.

<div>
	<iframe id="ifrm" src="https://www.webcodegeeks.com/" width="500" height="300"></iframe>
</div>
<div>
	<a href="javascript:retrun 0;" onclick="changeIframePro()">change iframe src</a>
</div>

You can get a reference to an iframe using getElementById(). You can use that reference to set properties on the iframe, such as style,src and so on.

<script type="text/javascript">

function changeIframePro(){
	// reference to iframe with id 'ifrm'
	var ifrm = document.getElementById('ifrm');
	ifrm.src = 'http://www.iliastsagklis.com/'; // set src to new url
}

</script>

The result in the browser would be:

Chnage iframe src by using javascript
Change iframe src by using javascript

2.2 Access to Iframe and its Document and Content

The buttons in the following html code will access the iframe data by using contentWindow and contentDocument properties.

<h1>Accessing an Iframe and its Document and Content</h1>
<p>This example demonstrates the containing document interacting with the iframe.</p>
<form id="demoForm" action="#">
    <p>
        <input name="button1" type="button" value="Button 1" onclick="button1Handler()"/>
        <input name="button2" type="button" value="Button 2" onclick="button2Handler()"/> 
        <input name="button3" type="button" value="Button 3" onclick="button3Handler()"/> 
        <input name="button4" type="button" value="Button 4" onclick="button4Handler()"/> 
    </p>
    <p><input type="text" name="display" size="30" readonly="readonly" /></p>
</form>

<iframe name="ifrm" id="ifrm" src="iframed.html" width="450" height="250"></iframe>

The iframe element provides contentWindow and contentDocument properties. The following JavaScript uses these properties to get references to the iframed document’s window and document objects. Once you have references to the window and document objects, you can access virtually any object or property in the iframed document and can access it’s javascript varibales and methods.

<script type="text/javascript">

    // get reference to the form 
    var form = document.getElementById('demoForm');
    
    // set height of iframe and display value
    function button1Handler(){
        var ifrm = document.getElementById('ifrm');
        var ht = ifrm.style.height = '200px';
        form.display.value = 'The iframe\'s height is: ' + ht;
    }
    
    // increment and display counter variable contained in iframed document
    function button2Handler() {
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        var counter = ++win.counter; //  increment
        form.display.value = 'counter in iframe is: ' + counter;
    }
    
    // reference form element in iframed document
    function button3Handler() {
        
        var ifrm = document.getElementById('ifrm');
        // reference to document in iframe
        var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
        // get reference to greeting text box in iframed document
        var fld = doc.forms['iframeDemoForm'].elements['greeting'];
        var val = fld.value;
        // display value in text box
        form.display.value = 'The greeting is: ' + val;
    }
    
    function button4Handler(){
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        win.clearGreeting(); // call function in iframed document
    }

</script>

The result in the browser would be:

Access to Iframe and its Document and Content
Access to Iframe and its Document and Content

2.3 JavaScript Interaction between Iframe and Parent

First of all add the following html code to the iframeExample.html page.

<h1>References from Iframed Document to its Parent</h1>
<p>This example demonstrates access from iframed document to containing document.</p>
<iframe name="ifrm" id="ifrm" src="parented.html" width="450" height="250"></iframe>

<form action="#" id="demoForm">
    <label for="greeting">Enter a Greeting: </label>
    <input type="text" name="greeting" id="greeting" value="Hello there!" />
</form>

<script type="text/javascript">
    var counter = 0;
</script>

Create a new page and add following code . parented.html

<form action="#" id="iframeDemoForm">
    <p><input name="button1" type="button" value="Click Me" /> repeatedly to increment global variable in containing document</p>
    <p><input name="button2" type="button" value="Click Me" /> to transfer Greeting below to text box above</p>
</form>

It is simpler to use the parent property to access the containing document. For example, you can reference a form in the containing document,notice line 9 of the following javascript code.

The parent keyword can also be used to access global variables or invoke functions in the main document from the document inside the iframe, as the example below demonstrates.

<script type="text/javascript">

(function() {
    // get reference to form to attach button onclick handlers
    var form = document.getElementById('iframeDemoForm');
    // increment and display counter variable contained in parent document
    form.elements['button1'].onclick = function() {
        parent.counter++;
        var parentCounter = 'counter in parent document is: ' + parent.counter;
        this.form.elements['display'].value = parentCounter;
    }

    form.elements.button2.onclick = function() {
        // get reference to greeting text box in containing document
        var fld = parent.document.forms['demoForm'].elements['greeting'];
        var val = fld.value;
        // display value in iframed document's text box
        this.form.elements.display.value = 'The greeting is: ' + val;
    }
})(); // end remove from global namespace and invoke
</script>

The result in the browser would be:

javascriptIframeExample3
JavaScript Interaction between Iframe and Parent

2.4 Dynamically Generating an Iframe

On this page, JavaScript is used to create an iframe element and insert it into the document. The createElement method is used to dynamically generate the iframe. Either the appendChild or insertBefore method can be used to place the iframe in the document. The setAttribute method can be used to add id, src, and other attributes.Following html and javascript demonstrates the dynamically generating of Iframe.

       <h1>Dynamically Generating an Iframe</h1>
       <p id="marker" class="end">Iframes Examples</p>
<script type="text/javascript">
(function() {
    var ifrm = document.createElement('iframe');
    ifrm.setAttribute('id', 'ifrm');

    // to place before another page element
    var el = document.getElementById('marker');
    el.parentNode.insertBefore(ifrm, el);

    ifrm.setAttribute('src', 'http://www.webcodegeeks.com');
})(); 
</script>

3. Download the Source Code

Download: You can download the full source code of this example here: Javascript Iframe Example

Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
nice
nice
8 years ago

can u give tutorial about how to change dropdown value and text box value with the change in dropdown option? in php JavaScript . JavaScript will use on change functn but it is nt working :(

Back to top button