Properties and Methods of the window object

Methods of the window object

The window object contains many properties and methods, a full list you can find to MDN: window object API.

- Below there are presented some of the most used properties and methods of the window object in JavaScript, with code and examples.

Properties of the window object

console - returns a reference to the console object which provides access to the browser's debugging console.

<h4>Example console</h4>
<p>Click on the button to see the result of calling the console.log() method with an array (see also in the browser console: F12).</p>
<button id='btn1'>Click</button>

<script>
var arr =['marplo.net', 'gamv.eu'];
document.getElementById('btn1').addEventListener('click', (ev)=>{
 console.log(arr);
});
</script>

document - returns the document object.

- See the tutorial from: couresweb.net/javascript/document-object-dom

frameElement - returns an objectr with the <iframe> or <object> elements in which the window is embedded, or null if the window is not embedded.

<h4>Example frameElement</h4>
<p>Click on the following button. If this content is into an &lt;iframe&gt; or &lt;object&gt;, it displays an alert window and changes the 'src' address, or 'null' if it is in main window.</p>
<button id='btn1'>Click</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frme = window.frameElement;

 //if it is in iframe, or object, changes the src
 if(frme){
 alert('This content is not in the main window');
 frme.src ='//coursesweb.net/';
 }
 else alert('null');
});
</script>

frames - returns an array with the <iframe> elements in the current window.

<h4>Example frames</h4>
<p>When click on button it displays the number of &lt;iframe&gt; elements in this page, and change the 'src' address of the first iframe (index 0).</p>
<button id='btn1'>Change iframe</button> <em id='resp'></em><br><br>
<iframe src="//coursesweb.net/"></iframe><br>
<iframe src="//gamv.eu"></iframe>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='Nr. iframe: '+ window.length;
 var ifrm = window.frames;
 ifrm[0].location ='//coursesweb.net/blog';
});
</script>

history - returns the history object of the window.

- See the tutorial from: coursesweb.net/javascript/history

innerHeight - gets the height of the content area of the browser window (in pixels).

<h4>Example innerHeight</h4>
<p>Click on the button to display the value of innerHeight.</p>
<button id='btn1'>Get innerHeight</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='innerHeight: '+ window.innerHeight;
});
</script>

innerWidth - gets the width of the content area of the browser window (in pixels).

<h4>Example innerWidth</h4>
<p>Click on the button to display the value of innerWidth.</p>
<button id='btn1'>Get innerWidth</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='innerWidth: '+ window.innerWidth;
});
</script>

isSecureContext - returns True if the page is with secure contexts (address with HTTPS), otherwise, False.

if(window.isSecureContext){
 //the page is with secure contexts, service workers can be used
 navigator.serviceWorker.register('/worker.js').then(function(){
 //...
 });
}

length - returns the number of <iframe> elements in current window.

<h4>Example window.length</h4>
<p>Click on the button to display the number of &lt;iframe&gt; in page.</p>
<button id='btn1'>Click</button> <em id='resp'></em><br><br>
<iframe src="//coursesweb.net/"></iframe><br>
<iframe src="//gamv.eu"></iframe>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='Nr. iframe: '+ window.length;
});
</script>

localStorage - returns the localStorage object, that contains methods to store data in browser.

<h4>Example localStorage</h4>
<p>When click on the button, the text from the input field is saved in browser.<br>
Then, click on the next button to display the text saved in localStorage.</p>
<div id='dv1'>
Text: <input type='text' value='coursesweb.net' id='txt1'><br>
<button id='btn1'>Add in storage</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from storage</button>
<blockquote id='resp'>#resp</blockquote>
</div>

<script>
//stores in browser the value from #txt1, with key 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var str = document.getElementById('txt1').value;
 localStorage.setItem('some_key', str);

 //display the div with the next button
 document.getElementById('dv1').style.display ='none';
 document.getElementById('dv2').style.display ='block';
});

//adds in #resp the text saved in localStorage, 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = localStorage.getItem('some_key');
});
</script>

location - returns the location object of the window.

- See the tutorial from: coursesweb.net/javascript/location-object

name - sets or returns the window name (used for iframe and pop-up).

<h4>Example window.name</h4>
<p>When click on the button, a pop-up window will be displayed.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=100');
popup.document.write('<p>The name of this window: '+ popup.name +'</p>');
});
</script>

navigator - returns the navigator object.

- See the tutorial from: coursesweb.net/javascript/navigator

opener - returns a reference to the window that opened this current window.

<h4>Example window.opener</h4>
<p>When click on the button, a pop-up window is displayed.<br>
When click on the button in the pop-up window, it is changed the background' color of the opener.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=180, left=35, top=90');

//adds content in popup
popup.document.write('<p>Click on the button to change the "opener" background color.</p><button onclick="window.opener.document.body.style.background=\'#dadefe\'">opener background</button>');
});
</script>

outerHeight - gets the height of the outside of the browser window (including toolbar), in pixels.

<h4>Example outerHeight</h4>
<p>Click on the button to see the height of this window.</p>
<button id='btn1'>Get outerHeight</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='outerHeight: '+ window.outerHeight;
});
</script>

outerWidth - gets the width of the outside of the browser window (in pixels).

<h4>Example outerWidth</h4>
<p>Click on the button to see the width of this window.</p>
<button id='btn1'>Get outerWidth</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='outerWidth: '+ window.outerWidth;
});
</script>

parent - returns a reference to the parent of the current window.

<h4>Example parent</h4>
<p>Click on the button to change the background color of the parent window of this iframe.</p>
<button id='btn1'>Parent background</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 parent.document.body.style.background ='#bfbffe';
});
</script>

screenX - returns the horizontal distance of the left border of the user's browser from the left side of the screen (in pixels).

<h4>Example window.screenX</h4>
<p>When click on the button, it opens a pop-up window that shows the value of its screenX.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>screenX: '+ popup.screenX +'</p>');
});
</script>

screenY - returns the vertical distance of the top border of the user's browser from the top side of the screen (in pixels).

<h4>Example window.screenY</h4>
<p>When click on the button, it opens a pop-up window that shows the value of its screenY.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>screenY: '+ popup.screenY +'</p>');
});
</script>

sessionStorage - returns the sessionStorage object used to store session data of current window in browser.

<h4>Example sessionStorage</h4>
<p>When click on the button, it saves in sessionStorage the text from the input field.<br>
Then, click on the next button to display the text from sessionStorage.</p>
<div id='dv1'>
Text: <input type='text' value='coursesweb.net' id='txt1'><br>
<button id='btn1'>Add in session</button>
</div>
<div id='dv2' style='display:none'>
<button id='btn2'>Get from session</button>
<blockquote id='resp'>#resp</blockquote>
</div>

<script>
//stores in sessionStorage the value from #txt1, with key 'some_key'
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var val = document.getElementById('txt1').value;
 sessionStorage.setItem('some_key', val);

 //displays the div with the next button
 document.getElementById('dv1').style.display ='none';
 document.getElementById('dv2').style.display ='block';
});

//adds in #resp the text from sessionStorage, with key 'some_key'
document.getElementById('btn2').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = sessionStorage.getItem('some_key');
});
</script>

scrollX - returns the number of pixels that the document has already been scrolled horizontally.

<h4>Example scrollX</h4>
<p style='background:#fdfddb; width:230%;'>If you scroll the page horizontally, it is displayed the value of scrollX.</p>
<blockquote id='resp' style='position:fixed;left:20%;'>#resp</blockquote>

<script>
var resp = document.getElementById('resp');

//detects the scroll event
window.addEventListener('scroll', (ev)=>{
 resp.innerHTML ='scrollX: '+ window.scrollX;
});
</script>

scrollY - returns the number of pixels that the document has already been scrolled vertically.

<h4>Example scrollY</h4>
<p style='background:#fdfddb; width:230%;'>If you scroll the page vertically, it is displayed the value of scrollY.</p>
<blockquote id='resp' style='position:fixed;left:20%;'>#resp</blockquote>
<div style='background:#fdfddb; height:2000px;'> </div>

<script>
var resp = document.getElementById('resp');

//detects the scroll event
window.addEventListener('scroll', (ev)=>{
 resp.innerHTML ='scrollY: '+ window.scrollY;
});
</script>

self - returns an object reference to the window object itself.

<h4>Example self</h4>
<p>Click on the button to see if this content is into an iframe or in the main window.</p>
<button id='btn1'>Check window</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 if(window.top != window.self) var msg ='This content is in iframe.';
 else var msg ='This content is in the main window.';
 document.getElementById('resp').innerHTML = msg;
});
</script>

top - refers to the main window in browser.

<h4>Example top</h4>
<p>When click on the button, the background color of the main (top) window is changed.</p>
<button id='btn1'>Top background</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 top.document.body.style.background ='#c0c0fe';
});
</script>

Methods of the window object

alert('msg') - displays an alert dialog box with an OK button.

<h4>Example alert()</h4>
<p>Click on the button to display an alert dialog box.</p>
<button id='btn1'>alert</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 alert('The peace is good. Give and you receive.');
});
</script>

atob('s_64') - decodes a string of data which has been encoded using base-64 encoding (with btoa() ).

<h4>Example atob()</h4>
<p>When click on the button, the string below is decoded (encoded with base-64).</p>
<button id='btn1'>Decode</button>
<blockquote id='resp'>SSBhbQ==</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var enc ='SSBhbQ==';
 var dec = atob(enc);
 document.getElementById('resp').innerHTML ='String encoded: '+ enc +'<br>Decoded: '+ dec;
});
</script>

btoa(str) - creates a base-64 encoded ASCII string from the specified string (str).

<h4>Example btoa()</h4>
<p>When click on the button, the text added in the input field is encoded with btoa(), and added to #resp.</p>
Text: <input type='text' value='coursesweb.net' id='txt1'><br>
<button id='btn1'>Encode</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var str = document.getElementById('txt1').value;
 document.getElementById('resp').innerHTML = btoa(str);
});
</script>

clearInterval(rsi) - stops the execution of a setInterval().
- 'rsi' represents the value returned by setInterval()

<h4>Example clearInterval()</h4>
<p>Click on the button to stop the setInterval() function that displays this time.</p>
<blockquote id='resp'>#resp</blockquote>
<button id='btn1'>Stop Time</button>

<script>
//function used with setInterval()
function clock(){
 var dt = new Date();
 document.getElementById('resp').innerHTML = dt.toLocaleTimeString(); 
}
var rsi = setInterval(clock, 1000);

//when click on #btn1 stops the execution of rsi
document.getElementById('btn1').addEventListener('click', (ev)=>{
 clearInterval(rsi);
});
</script>

clearTimeout(rst) - cancels the execution of the setTimeout() method.
- 'rst' represents the value returned setTimeout()

<h4>Example clearTimeout()</h4>
<p>If you click on the Alert button it opens after 3 seconds an alert dialog box, with setTimeout().<br>
But if you click the Cancel button before passing 3 seconds, the execution of setTimeout() is canceled.</p>
<button id='btn1'>Alert</button> - 
 <button id='btn2'>Cancel</button>

<script>
var rst;

//when click on #btn1 displays an alert after 3 seconds
document.getElementById('btn1').addEventListener('click', (ev)=>{
 rst = setTimeout(()=>{ alert('It does not mean anything');}, 3000);
});

//when click on #btn2 cancels the execution of rst
document.getElementById('btn2').addEventListener('click', (ev)=>{
 clearTimeout(rst);
});
</script>

close() - closes the current pop-up.

<h4>Example window.close()</h4>
<p>When click on the button, it opens a pop-up that contains a Close button.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
popup.document.write('<p>The Close will close this window.</p><button onclick="window.close()">Close</button>');
});
</script>

confirm('msg') - displays a dialog box with a message that the user needs to respond to.

<h4>Example confirm()</h4>
<p>When click on the button, a confirm dialog box is opened.</p>
<button id='btn1'>Confirm</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 confirm('You love yourself, you forgive yourself.');
});
</script>

getComputedStyle(elm) - returns a CSSStyleDeclaration object with the CSS properties applied to the 'elm' element.
- The value of a css property from the returned object can be read with getPropertyValue('prop-name').

<h4>Example getComputedStyle()</h4>
<p id='elm1' style='background-color:#fbfbbe;'>When click on the button, it is displayed the value of the 'background-color' property of this paragraph.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var elm = document.getElementById('elm1');
 var obcss = window.getComputedStyle(elm);
 document.getElementById('resp').innerHTML ='background-color: '+ obcss.getPropertyValue('background-color');
});
</script>

matchMedia('media-query') - returns a MediaQueryList object representing the specified 'media-query' string.
- 'media-query' is a string with CSS @media rules (min-height, max-width, orientation, etc.); see: CSS @media Rule.
- Supports the event change (or a function called with addListener(func)).

<h4>Example matchMedia()</h4>
<p>The background color and the text in the next Div is changed if the window width is less than or equal to 600px.

Try to make this window smaller and larger than 600px.</p>
<div id='elm1' style='background-color:#fbfbbe;'>Div</div>

<script>
var elm = document.getElementById('elm1');

var mql = window.matchMedia('(max-width: 600px)');

//function called when the ressult from mql is changed
function screenTest(ev){
 if(ev.matches){
 //the window has maximum 600px
 elm.innerHTML ='Div<br>This winow is less or equal to 600px.';
 elm.style.background ='#bdeebd';
 }
 else {
 //the window has more than 600px
 elm.innerHTML ='Div<br> - This window has more than 600px...';
 elm.style.background ='#cecefe';
 }
}

mql.addListener(screenTest); //Or: mql.addEventListener('change', screenTest)
</script>

moveBy(x, y) - moves the current window by a specified amount of pixels: x, y (horizontal, vertical).

<h4>Example window.moveBy()</h4>
<p>When click on the button it opens a pop-up window, and after 2 seconds it will be moved with moveBy().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>It moves immediately.</h3>');
 setTimeout(()=>{ popup.moveBy(150, 100);}, 2000);
});
</script>

moveTo(x, y) - moves the window to the specified coordinates: x, y (horizontal, vertical).

<h4>Example window.moveTo()</h4>
<p>When click on the button it opens a pop-up window, and after 2 seconds it will be moved with moveTo().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>It moves immediately.</h3>');
 setTimeout(()=>{ popup.moveTo(240, 2);}, 2000);
});
</script>

open(URL, name, props) - opens a new window with the content from the specified URL, and the name from 'name'.
- 'props' is Optional, a string with parameters for window setting: position, dimensions (see in example).

<h4>Example window.open()</h4>
<p>When click on the button it opens a pop-up window with these properties: <em>'width=650, height=450, left=30, top=50, menubar=0, titlebar=0'</em>.</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('//gamv.eu/', 'TestWin', 'width=650, height=450, left=30, top=50, menubar=0, titlebar=0');
});
</script>

prompt('msg', 'default') - returns the text entered by the user in a prompt dialog box.

<h4>Example prompt()</h4>
<p>Click the button and see how the prompt() method works.</p>
<button id='btn1'>Open prompt</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var nume = window.prompt('Write your name', 'Name'); 
 document.getElementById('resp').innerHTML ='Hello '+ nume +'<br> Welcome.';
});
</script>

resizeBy(w, h) - Resizes the current window by a certain amount of pixels w, h (width, height) relative to its current size.

<h4>Example window.resizeBy()</h4>
<p>When click on the button it opens a popup window, and after 2 seconds it will be resized with resizeBy().</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>The dimensions will be changed in 2 seconds.</h3>');
 setTimeout(()=>{ popup.resizeBy(180, 140);}, 2000);
});
</script>

resizeTo(w, h) - sets the window dimensions to the specified w, h (width, height), in pixels.

<h4>Example window.resizeTo()</h4>
<p>When click on the button it opens a popup window, and after 2 seconds it will be resized to: width 450 and height 350 (pixelx).</p>
<button id='btn1'>Open pop-up</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var popup = window.open('', 'TestWindow', 'width=330, height=200, left=35, top=90');
 popup.document.write('<h3>The dimensions will be changed in 2 seconds.</h3>');
 setTimeout(()=>{ popup.resizeTo(450, 350);}, 2000);
});
</script>

scrollBy(x, y) - scrolls the document in the window by the given amount of pixels: x, y (horizontally, vertically).

<h4>Example scrollBy()</h4>
<p style='background:#fdfddb; height:1800px; width:230%;'>At each click on the button, the page will scroll down by 300 pixels.<br>
The coordinates of the scroll bars are displayed in the button.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 window.scrollBy(0, 300);
 ev.target.textContent = window.scrollX +', '+ window.scrollY;
});
</script>

scrollTo(x, y) - scrolls to a particular set of coordinates in the document: in pixels x, y (horizontally, vertically).

<h4>Example scrollTo()</h4>
<p style='background:#fdfddb; height:1500px; width:130%;'>When you click the button, the horizontal scroll bar moves to position 300, and the vertical bar scrolls down to position 1100 (pixels).<br>
The coordinates of the scroll bars are displayed in the button (with the 'scroll' event).<br>
 - At the bottom is a scroll-top button.</p>
<button id='btn1' style='position:fixed;left:20%; top:170px;'>Scroll</button>
<button onclick='window.scrollTo(0,0)' style='display:block; margin:5px 25px 8px auto;'>Go-Top</button>

<script>
var btn = document.getElementById('btn1');

btn.addEventListener('click', (ev)=>{
 window.scrollTo(300, 1100);
});

//detecs the scroll event
window.addEventListener('scroll', (ev)=>{
 //displays in btn the scroll bars coordinates
 btn.textContent = window.scrollX +', '+ window.scrollY;
});
</script>

setInterval(funcN, mls) - schedules a function to execute every time a given number of milliseconds elapses ('mls').

<h4>Example setInterval()</h4>
<p>When you click on the button, it displays after one second the current time, with setInterval().</p>
<blockquote id='resp'><button>Clock</button></blockquote>

<script>
var resp = document.getElementById('resp');

//function called with setInterval()
function clock(){
 var dt = new Date();
 resp.innerHTML = dt.toLocaleTimeString();
}

//when click on the button
resp.querySelector('button').addEventListener('click', (ev)=>{
 ev.target.outerHTML =''; //removes the button

 //calls the clock function every 1000 milliseconds
 setInterval(clock, 1000);
});
</script>

setTimeout(funcN, mls) - calls the function from 'funcN' after the specified number of milliseconds, 'mls'.

<h4>Example setTimeout()</h4>
<p>Click on the button to display an image after 2.5 seconds.</p>
<blockquote id='resp'><button>Clock</button></blockquote>

<script>
var resp = document.getElementById('resp');

//function called with setTimeout()
function addImg(){
 resp.innerHTML ="<img src='javascript/imgs/smile_gift.png' alt='Smile' height='115' width='128'/>";
}

//when click on the button
resp.querySelector('button').addEventListener('click', (ev)=>{
 ev.target.outerHTML ='Wait'; //removes the button

 //calls addImg() after 2500 milliseconds
 setTimeout(addImg, 2500);
});
</script>

stop() - stops window loading (like pressing the Stop button in the browser).

<script>
//stops window loading after 20 seconds
setTimeout(()=>{ window.stop();}, 20000);
});
</script>

<<-List with JavaScript events -- jsSHA - SHA Hashes ..->>

Properties and Methods of the window object

Javascript Course

Properties of the window object

Methods of the window object

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month