IFrames are used for displaying multiple HTML documents in the same browser window. The iframe object correspond to the <iframe> HTML element.
To create iframe, you can use the fallowing HTML tag:

<iframe src='page_url' width='600' height='200' name='name_frame'></iframe>

• The window.frames property returns an array with all iframe elements in current window.
You can access an iframe using its index in the array (strting from 0) or using the value of the name attribute or its ID (with document.getElementById()).

When moving up the chain toward the parent from an iframe, you can use one of parent or top keyword.
- top refers to the top - most window object in the hierarchy, while parent means the immediate owner window.


The fallowing code shows how you can acces the first iframe in main window, using frames array, and an iframe by its 'name'.
<script>
//array with all iframes in main window
var iframes = top.frames;

//accesses the first iframe
var ifr1 = iframes[0];

//accesses an iframe by its name
var ifr1 = iframes[0]['iframe_name'];
</script>

- The following example displays in an HTML element the values of the 'src', 'height' and 'width' attributes of an iframe, accessed with getElementById().
<iframe src='/' width='600' height='200' id='ifr1'></iframe>
<p>Click on the button to display the values of the 'src', 'height' and 'width' attributes of the iframe.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'></blockquote>

<script>
var ifr = document.getElementById('ifr1'); //the iframe

var resp = document.getElementById('resp');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 resp.innerHTML ='src: '+ ifr.src +'<br>height: '+ ifr.height +'<br>width: '+ ifr.width;
});
</script>

iframe object properties

For each <iframe> tag in an HTML document, JS creates an iframe object, which contains specific properties.

allowPaymentRequest - Returns True or False, indicating whether the Payment Request API may be invoked on a cross-origin iframe.

contentDocument - Returns the document object generated by an iframe.
<h4>Example contentDocument</h4>
<iframe id='ifrm' src='/'></iframe>
<p>Click on the button to change the content of the iframe above.</p>
<button id='btn1'>Click</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.contentDocument.body.innerHTML ='<h3>Content from JS added in iframe</h3>';
});
</script>
contentWindow - Returns the window object generated by an iframe.
<h4>Example contentWindow</h4>
<iframe id='ifrm' src='/'></iframe>
<p>Click on the button to change the content of the iframe above.</p>
<button id='btn1'>Click</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.contentWindow.document.body.innerHTML ='<h3>Content from JS added in iframe</h3>';
});
</script>
height - the value of the height attribute in an iframe (in pixels).
<h4>Example iframe height</h4>
<iframe srcdoc='iframe content' id='ifrm' src='#'></iframe>
<p>Click on the button to change the iframe height.</p>
<button id='btn1'>Set height</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.height =255;
});
</script>
name - Gets and sets the name attribute.
<h4>Example iframe height</h4>
<iframe srcdoc='iframe content' id='ifrm' src='#' name='name_ifrm'></iframe>
<p>Click on the button to display the iframe name.</p>
<button id='btn1'>iframe neme</button> <span id='resp'></resp>

<script>
var resp = document.getElementById('resp');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 resp.innerHTML = ifr.name;
});
</script>
referrerPolicy - returns or sets the value of the referrerpolicy attribute.
The referrerpolicy attribute define which referrer is sent when fetching the resource. It can have these values:
- 'no-referrer' - the Referer: HTTP header will not be sent.
- 'origin' - the referrer will be the origin of the page (domain name).
- 'unsafe-url' - the referrer will include the origin and the path.
<h4>Example referrerPolicy</h4>
<iframe srcdoc='iframe content' id='ifrm' src='#' referrerpolicy='unsafe-url'></iframe>
<p>Click on the button to display the value of the 'referrerpolicy' attribute in iframe.</p>
<button id='btn1'>iframe referrerpolicy</button> <span id='resp'></resp>

<script>
var resp = document.getElementById('resp');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 resp.innerHTML = ifr.referrerPolicy;
});
</script>
src - sets or returns the value of the src attribute in an iframe.
<h4>Example set iframe src</h4>
<iframe id='ifrm' src='/' width='455'></iframe>
<p>If you click on the button, it sets another value for the iframe 'src' attribute, that will display another page in iframe.</p>
<button id='btn1'>set iframe src</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.src ='//gamv.eu/';
});
</script>
srcdoc - sets or returns the value of the 'srcdoc' attribute, that represents the content to display in the iframe.
<h4>Example srcdoc</h4>
<iframe srcdoc='iframe content' id='ifrm' src='#'></iframe>
<p>Click on the button to change the iframe content with 'srcdoc' property.</p>
<button id='btn1'>Set srcdoc</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.srcdoc ='<h3>Content added with srcdoc from JavaScript.</h3>';
});
</script>
width - the value of the width attribute in an iframe (in pixels).
<h4>Example iframe width</h4>
<iframe srcdoc='iframe content' id='ifrm' src='#'></iframe>
<p>Click on the button to change the iframe width.</p>
<button id='btn1'>Set width</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var ifr = document.getElementById('ifrm');
 ifr.width =555;
});
</script>

iframe navigation

With the names of the iframe elements we can exchange information between two iframes, throught the main window, for example, we can make a link in a iframe to open a page in another iframe.
Next we will study three cases of relationships and visits between iframes and main window.

The contents of a document can be accessed from another document only if the two documents are located in the same domain.
The iframe document can be accessed with the contentDocument property.


  1) The main window accessing an iframe
If you have a script in the parent window, to access the iframe, just use the name of the iframe.
For example:
window.frames['ifr_name'].contentDocument.write('Message from parent window');
- The text will be write in the iframe with name 'ifr_name'.

  2) The iframe accessing the main window
If we have the JS script in an iframe, and we want that script to access elements of main window, we use the top keyword in the script inside iframe.
For example:
top.document.write('Message from iframe');
- The text will be write in the main window.

  3) The iframe accessing another iframe
If we have a JS script in an iframe (iframe1), and we want that script to access another iframe elements (iframe2), we use the top keyword and the name of the second iframe.
For example:
top.iframe2.contentDocument.write('Message from iframe1')
- The text will be write in the iframe2 page.

• If you want to change the contents of a iframe (named 'iframe1') from main window or from another iframe, you could create a link like this:
<a href='new_page.html' target='iframe1'>New Page</a>
- Or, using JavaScript:
top.frames['iframe1'].src ='newpage.html';

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
iframe object

Last accessed pages

  1. JQZoom Image Magnifier (9941)
  2. JavaScript code and PHP (21542)
  3. Polygons with CSS (6773)
  4. Ajax-PHP Chat Script (37776)
  5. SHA512 Encrypt hash in JavaScript (10932)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (417)
  2. Read Excel file data in PHP - PhpExcelReader (331)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (258)
  4. PHP getElementById and getElementsByTagName (210)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)