Windows and frames with browser object model (BOM)

Browser window can be split into many parts called frames. Each part behaves as a separate window and can load separate documents. Reloading and navigation of one frame does not affect other frames. Each frame has a separate window object and window object has a name property containing name of the frame. If there are multiple frames in a webpage the multiple window objects are indexed in frame collection by both number and name of the frame. The window.frames syntax lists the sub-frames of the current window (aka iframes) as array-like object.

Following list shows some of the possibilities when using the window object:

frameList = window.frames; - returns the frame list.
window.frames[0] - access frames by number.
window.frames[‘iframe_name’] - access iframe by name.
window.frames[index].location- changes the webpage in the ‘index’ position to the location assigned.
window.length – gives the number of iframe elements in the current window.

Example of using window object in browser-object-model

<!DOCTYPE html>
<html>	

  <head>
    <style type="text/css">
      iframe {width:45%;margin-left:2.5%;height:200px;}
      </style>
  </head>

<body>		
  <button onclick="change()">change me</button><br /><br />
	<iframe src="http://www.bbc.com" name="page1"></iframe>
	<iframe src="http://www.cnn.com" name="page2"></iframe>
		
	<script>
	function change(){
	//Changes 0 index frame to below location
		window.frames[0].location = "http://www.novilist.hr";	
	//Changes &lsquo;page2&rsquo; frame to below location
        window.frames['page2'].location="http://www.foxnews.com";
    //Gives length of frameset.
		window.alert("Number of iframes in page " +window.length);
	}			
	</script>
</body>	

</html>

›› go to examples ››

Windows and frames with browser object model (BOM)

Example of using window object in browser-object-model

Comments

About

Contact

Get Connected