Window object in Javascript
In JavaScript, object is the container of properties/variables and methods/functions. Window is the object which contains some properties and methods to perform some browser window related functions.
Window object properties and methods
window.innerHeight property in JavaScript
This property returns the inner height of the current browser window (in pixels)
Example of innerHeight property
<html>
<head>
<title>Window object innerHeight property</title>
<script>
function demoCompuhelp()
{
var h=window.innerheight;
alert("innerheight of current browser window is = "+h);
}
</script>
</head>
<body>
<form>
<input type="button" value="click" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.innerWidth property in JavaScript
This property returns the inner width of the current browser window (in pixels)
Example of window.innerWidth property
<html>
<head>
<title>Window object innerWidth property</title>
<script>
function demoCompuhelp()
{
var w = window.innerWidth;
alert("innerWidth of current browser window is = "+w);
}
</script>
</head>
<body>
<form>
<input type="button" value="click" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.outerHeight property in JavaScript
This property returns the outer height of the current browser window (in pixels)
Example of window.outerHeight property
<html>
<head>
<title>Window object outerHeight property</title>
<script>
function demoCompuhelp()
{
var h=window.outerHeight;
alert("outerHeight of current browser window is = "+h);
}
</script>
</head>
<body>
<form>
<input type="button" value="outerHeight" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.outerWidth property in JavaScript
This property returns the outer width of the current browser window (in pixels)
Example of window.outerWidth property
<html>
<head>
<title>Window object outerWidth property</title>
<script>
function demoCompuhelp()
{
var w = window.outerWidth;
alert("outerWidth of current browser window is = "+w);
}
</script>
</head>
<body>
<form>
<input type="button" value="outerWidth" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.close() method in JavaScript
This method closes the current browser window
Example of window.close() method
<head>
<title>Window object close() method</title>
<script>
function demoCompuhelp()
{
window.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="close" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.open() method in JavaScript
This method creates a new window and open it
Example of window.open() method
<head>
<title>Window object open() method</title>
<script>
function demoCompuhelp()
{
window.open("https://www.compuhelpindia.com","","width=400, height=400");
}
</script>
</head>
<body>
<h3>open("Url","windowname","width and height")</h3>
<form>
<input type="button" value="open window" onClick="demoCompuhelp()"/>
</form>
</body>
</html>
window.moveBy() method in JavaScript
The moveBy() method moves a window to a specified number of pixels relative to its current (x,y) coordinates.
Example of window.moveBy() method
<html>
<head>
<title>Window object moveBy() method</title>
<script>
var win;
function openWin() {
win = window.open("https://www.compuhelpindia.com","compuhelp window", "width=200, height=100");
win.document.write("<p>This is 'compuhelp Window'</p>");
}
function moveWin() {
win.moveBy(300,300);
win.focus();
}
</script>
</head>
<body>
<p>Open "compuhelp window" and move the new window 300px relative to its current position:</p>
<button onclick="openWin()">Open window</button>
<button onclick="moveWin()">Move window</button>
</body>
</html>
window.moveTo() method in JavaScript
The moveTo() method moves a window's left and top edge to the specified coordinates(x,y).
Example of window.moveTo() method
<html>
<head>
<title>Window object moveTo() method</title>
<script>
var win;
function openWin() {
win=window.open("", "compuhelp window", "width=100, height=100");
win.document.write("<p>This is 'compuhelp window'</p>");
}
function moveWin() {
win.moveTo(400,400);
win.focus();
}
</script>
</head>
<body>
<p>Open "compuhelp window" and move the new window.</p>
<form>
<input type="button" value="open window" onclick="openWin()">
<input type="button" value="Move window" onclick="moveWin()">
</form>
</body>
</html>
window.print() method in JavaScript
The print() method prints the contents of the current window.
The print() method opens the Print Dialog Box, which lets the user to select the printing options.
Example of window.print() method
<head>
<title>Window object print() method</title>
<script>
function printFunction()
{
window.print() ;
}
</script>
</head>
<body>
<form>
<input type="button" value="print" onClick="printFunction()"/>
</form>
</body>
</html>
window.scrollBy() method in JavaScript
The scrollBy() method scrolls the document by the specified number of pixels.
Example of window.scrollBy() method
<html>
<head>
<title>Window object scrollBy() method</title>
<style>
body {
width: 4000px;
}
#button {
position: fixed;
}
</style>
<script>
function winScroll() {
window.scrollBy(50,0);
}
</script>
</head>
<body>
<p>Click the button to scroll the document window by 50px horizontally.</p>
<p>See down the horizontal scrollbar to see the effect.</p>
<input type="button" value="Click to scroll" onClick="winScroll()" id="button"/>
</body>
</html>
window.scrollTo() method in JavaScript
The scrollTo() method scrolls the document to the specified coordinates.
Example of window.scrollTo() method
<head>
<title>Window object scrollTo() method</title>
<style>
body {
width: 4000px;
}
</style>
<script>
function winScroll() {
window.scrollTo(50, 0);
}
</script>
</head>
<body>
<p>Click the button to scroll the document window to 50 pixels horizontally.</p>
<p>It will scroll only once.</p>
<input type="button" value="Click me to scroll" onclick="winScroll()"/>
</body>
</html>
window.stop() method in JavaScript
The stop() method stops window loading.
Example of window.stop() method
<html>
<head>
<title>Window object stop() method</title>
<script>
window.stop();
</script>
</head>
<body>
<p>The stop() method stops this text and the iframe from loading.</p>
<iframe src="https://www.compuhelpindia.com"></iframe>
</body>
</html>