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

​x
 
<!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 ››