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:
window.frames property returns an array with all iframe elements in current window.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.
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>
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, 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.referrerpolicy attribute define which referrer is sent when fetching the resource. It can have these values:
<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>
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.
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'.
If we have the JS script in an iframe, and we want that script to access elements of main window, we use thetopkeyword in the script inside iframe.
For example:top.document.write('Message from iframe');- The text will be write in the main window.
If we have a JS script in an iframe (iframe1), and we want that script to access another iframe elements (iframe2), we use thetopkeyword 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.
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id {
overflow: auto;
}document.getElementById("id").onmouseover = function(){
document.write("Have Good Life");
}if(isset($_GET["id"])) {
echo $_GET["id"];
}