javaScript window object

the object that relates to the current browser window.

the window object is the top level object in javaScript, and contains in itself several other object, such as 'document', 'history' etc.

all global javaScript object, functions, and variables automatically become members of the window object.

in this example the document object is a property of the window object:

    window.document.getElementById("top");

Typically, the browser creates one window object when it opens an HTML document. However, if a document defines one or more frames (that is, contains one or more frame or iframe tags),In this situation the browser creates only one window object for the original document, and only one-additional window object for each 'frame'.

note : you can also create new windows using methods such as open, showModalDialog, and showModelessDialog.


window size

the innerHeight and innerWidth properties used to determine the size of the browser window(excluding user interface elements, such as the window frame, toolbars,scrollbars etc.)


    var   height = window.innerHeight;
    
    var   width  = window.innerWidth;
    
    document.write("height---:"+height+"width----:"+width);

the outerHeight and outerWidth properties used to determine the size of the browser window(including user interface elements, such as the window frame, toolbars,scrollbars etc.)


    var   height = window.outerHeight;
    
    var   width  = window.outerWidth;
    
    document.write("height---:"+height+"width----:"+width);

window object methods

JavaScript moving windows

the moveBy() method moves a window a specified number of pixels relative to its current coordinates.

syntax:

          window.moveBy(horizontalpixels,  verticalpixels) ;
  • horizontalpixels : amount of pixels to move the window horizontally
  • verticalpixels    : amount of pixels to move the window vertically

note : you can use negative numbers as parameters for this function.

the moveTo() method moves the screen position to the upper-left corner of the window to the specified x and y position.

syntax:

          var   retval =  window.moveTo( x, y ) ;
  • x : is the horizontal coordinate to be moved to. value can be either positive or negative
  • y : is the vertical coordinate to be moved to. value can be either positive or negative

example

    var   new_window = null ;

 function   create_window(){
      
     features  = "innerheight = 230+,innerwidth=290+,resizable=yes+,screeny=120";
                   
     new_window = window.open(" ",  "_blank",  features);
                 
     var html_code  ="<html><head><title>move window</title>";

     html_code +="<body><h1 style='color:#3a4b9c'>you can move the window </h1>";
   
     html_code +="<img src='
     
         http://www.w3webtutorial.com/images/blueflower.jpg' />";
       
     html_code +="</body><html>";
       
  if(new_window && !new_window.closed) new_window.document.write(html_code);                   
 
     }
 
      function    move_By(){
                                        
                                        if(new_window  && !new_window.closed){
                                        
                                        new_window.moveBy(96,50);
                                        
                                        new_window.focus();   }
                                  }
                             
      function    move_To(){
                                        
                                        if(new_window  &&  !new_window.closed){
                                        
                                        new_window.moveTo(260,100);   
                                        
                                        new_window.focus();   }
                                        
                                  }      
                                        

JavaScript - resizing windows

the resizeby() method changes the current size of the window by the specified amount.

note : the resizeby() method is supported in all major browsers, except opera , chrome.

syntax:

          window.resizeby(width , height); 
  • width  : is the number of pixels to grow the window horizontally. value positive or negative.
  • height : is the number of pixels to grow the window vertically. value positive or negative.

the resizeto() method resizes a window to the specified width and height.

syntax:

          window.resizeto(width,  height)
  • width  : sets the width of the window, in pixels.
  • height : sets the height of the window, in pixels.

example

    var   new_window = null ;

 function   create_window(){
      
     features  = "innerheight = 230+,innerwidth=290+,resizable=yes+,screeny=200";
                   
     new_window = window.open(" ",  "_blank",  features);
                 
     var html_code  ="<html><head><title>move window</title>";

     html_code +="<body><h1 style='color:#3a4b9c'>you can move the window </h1>";
   
     html_code +="<img src='/images/blueflower.jpg' />";
       
     html_code +="</body><html>";
       
  if(new_window  && !new_window.closed) new_window.document.write(html_code);                   
 
     }
 
      function    resize_By(){
                                        
                                        if(new_window  && !new_window.closed){
                                        
                                        new_window.resizeBy(96,50);
                                        
                                        new_window.focus();   }
                                  }
                             
      function    resize_To(){
                                        
                                        if(new_window  &&  !new_window.closed){
                                        
                                        new_window.resizeTo(340,380);   
                                        
                                        new_window.focus();   }
                                        
                                  }      
                                        

JavaScript - scrolling windows

the scrollby() method scrolls the document in the window by the given amount.

syntax:

          window.scrollby(xx, yy)
  • xx : xx is the offset in pixels to scroll horizontally.
  • yy : yy is the offset in pixels to scroll vertically.

note : positive co-ordinates will scroll to the right and down the page.negative values will scroll to the left and up the page.

the scrollto() method scrolls the document in the window to the specified coordinates.

syntax:

          	window.scrollto(xpos , ypos)
  • xpos : the coordinate to scroll to, along the x-axis
  • ypos : the coordinate to scroll to, along the y-axis

example

    var   new_window = null ;

 function   create_window(){
      
     features  = "innerheight =300+,innerwidth=400+,screenx=300+,screeny=60+
     
                                                                                          ,scrollbars=yes";                   
     new_window = window.open(" ",  "_blank",  features);
                 
     var html_code  ="<html><head><title>move window</title>";

     html_code +="<body><h1 style='color:#3a4b9c'>you can move the window </h1>";
   
     html_code +="<img src='/images/www.jpg' /><br/><br/>";
     
     html_code +="<br/><br/><img src='/images/webaccess.jpg' /><br/><br/>";
     
     html_code +="<br/><img src='/images/blueflower.jpg' width='500px;'/><br/>";
            
     html_code +="</body><html>";
       
  if(new_window  && !new_window.closed) new_window.document.write(html_code);                   
 
     }
 
      function    scroll_By(){
                                        
                                        if(new_window  && !new_window.closed){
                                        
                                        new_window.scrollBy(10,70);
                                        
                                        new_window.focus();   }
                                  }
                             
      function    scroll_To(){
                                        
                                        if(new_window  &&  !new_window.closed){
                                        
                                        new_window.scrollTo(10,10);   
                                        
                                        new_window.focus();   }
                                        
                                  }      
                                        

JavaScript - window object properties

propertydescriptiontry it
closedretrieves whether the referenced window is closed 
defaultStatussets or returns the default text in the status bar of a window 
dialogHeightsets or gets the height of the modal dialog window 
dialogLeftsets or gets the left coordinate of the modal dialog window 
dialogTopsets or gets the top coordinate of the modal dialog window 
dialogWidthsets or gets the width of the modal dialog window 
documentreturns the document object for the window 
framesreturns an array of all the frames in the current window  
historyreturns the history object for the window 
innerWidthsets or returns the inner width of a window's content area 
innerHeightsets or returns the inner height of a window's content area 
lenghtsets or retrieves the number of objects in a collection 
locationreturns the location object for the window 
namesets or returns the name of the window  
navigatorreturns the navigator object for the window 
openersets or retrieves a reference to the window that created the current window 
outerHeightsets or retrieves the outer height of a window, including toolbar/scrollbar 
outerWidthsets or retrieves the outer width of a window, including toolbar/scrollbar 
parentreturns the parent window of the current window 
pageXOffsetgets the distance, in pixels, that a document has scrolled horizontally 
pageYOffsetgets the distance, in pixels, that a document has scrolled vertically 
screenreturns the screen object for the window 
screenxreturns the x coordinate of the window relative to the screen 
screenyreturns the y coordinate of the window relative to the screen 
screenTopreturns the y coordinate of the window relative to the screen 
screenLeftreturns the x coordinate of the window relative to the screen 
sessionStorageretrieves the web storage area for the session 
statussets or returns the in the status bar at the bottom of the window 
selfreturns the current window 
topreturns the topmost browser window 

JavaScript - window object methods

methoddescriptiontry it
alertdisplays an alert box with a message and an ok button 
addEventListenerregisters an event handler for the specified event type 
blurremoves focus from the current window 
clearIntervalclears a timer set using the setInterval 
clearTimeoutcancels the time-out that was set with the setTimeout method 
closecloses the current browser window 
conformdisplays a dialog box with a message and an ok and a cancle button 
createPopupcreates a pop-up window 
detachEventunbinds the specified function from the event 
escapeencodes a string 
findsearches for a given string in a window 
focussets focus on the current window 
moveBymoves a window relative to its current position 
moveTomoves a window to the specified position 
openopens a new browser window 
promptdisplays a dialog box that prompts the visitor for input 
resizeByresizes the window by the specified pixels 
resizeToresizes the window to the specified width and height 
scrollscrolls the window to a particular place in the document. 
scrollByscrolls the document in the window by the given amount 
scrollToscrolls to a particular set of coordinates in the document 
setCursorchanges the cursor for the current window 
setIntervalcalls a function or expression at specified intervals(in milliseconds) 
setTimeoutcalls a function or expression after a specified number of milliseconds