Browser Window
text comes here.... .
Revision:
If a document contains frames (<iframe> tags), the browser creates one window object for the HTML document and one additional window object for each frame.
All global JavaScript objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object. Global functions are methods of the window object.
The closed property is read-only.
Syntax: window.closed
examples
<div>
<p><button id="btn-A" onclick="openWin()">Open "myWindow"</button></p>
<p><button id="btn-B" onclick="closeWin()">Close "myWindow"</button></p>
<p><button id="btn-C" onclick="checkWin()">Is "myWindow" closed?</button></p>
<div id="win-A"></div>
</div>
<script>
let myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=400,height=200");
}
function closeWin() {
if (myWindow) {
myWindow.close();
}
}
function checkWin() {
let text = "";
if (!myWindow) {
text = "It has never been opened!";
} else {
if (myWindow.closed) {
text = "It is closed.";
} else {
text = "It is open.";
}
}
document.getElementById("win-A").innerHTML = text;
}
</script>
The console object provides access to the browser's debugging console. The console object is a property of the window object. it is accessed with window.console() or just console().
Console object methods:
assert() : writes an error message to the console if a assertion is false
clear() : clears the console
count() : outputs an error message to the console
group() : creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called
groupCollapsed() : creates a new inline group in the console. However, the new group is created collapsed. The user will need to use the disclosure button to expand it
groupEnd() : exits the current inline group in the console
info() : outputs an informational message to the console
log() : outputs a message to the console
table() : displays tabular data as a table
time() : starts a timer (can track how long an operation takes)
timeEnd() : stops a timer that was previously started by console.time()
trace() : outputs a stack trace to the console
warn() : outputs a warning message to the console
When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document. The document object is accessed with: window.document or just document.
Document object properties and methods:
activeElementM : returns the currently focused element in the document
addEventListener() : Attaches an event handler to the document
adoptNode() : Adopts a node from another document
anchors : Deprecated
applets : Deprecated
baseURI : Returns the absolute base URI of a document
body : Sets or returns the document's body (the <body> element)
charset : Deprecated
characterSet : Returns the character encoding for the document
close() : Closes the output stream previously opened with document.open()
cookie : Returns all name/value pairs of cookies in the document
createAttribute() : Creates an attribute node
createComment() : Creates a Comment node with the specified text
createDocumentFragment() : Creates an empty DocumentFragment node
createElement() : Creates an Element node
createEvent() : Creates a new event
createTextNode() : Creates a Text node
defaultView : Returns the window object associated with a document, or null if none is available.
designMode : Controls whether the entire document should be editable or not.
doctype : Returns the Document Type Declaration associated with the document
documentElement : Returns the Document Element of the document (the <html> element)
documentMode : Deprecated
documentURI : Sets or returns the location of the document
domain : Returns the domain name of the server that loaded the document
domConfig : Deprecated
embeds : Returns a collection of all <embed> elements the document
execCommand() : Deprecated
forms : Returns a collection of all <form> elements in the document
getElementById() : Returns the element that has the ID attribute with the specified value
getElementsByClassName() : Returns an HTMLCollection containing all elements with the specified class name
getElementsByName() : Returns an live NodeList containing all elements with the specified name
getElementsByTagName() : Returns an HTMLCollection containing all elements with the specified tag name
hasFocus() : Returns a Boolean value indicating whether the document has focus
head : Returns the <head> element of the document
images : Returns a collection of all <img> elements in the document
implementation : Returns the DOMImplementation object that handles this document
importNode() : Imports a node from another document
inputEncoding : Deprecated
lastModified : Returns the date and time the document was last modified
links : Returns a collection of all and elements in the document that have a href attribute
normalize() : Removes empty Text nodes, and joins adjacent nodes
normalizeDocument() : Deprecated
open() : Opens an HTML output stream to collect output from document.write()
querySelector() : Returns the first element that matches a specified CSS selector(s) in the document
querySelectorAll() : Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
readyState : Returns the (loading) status of the document
referrer : Returns the URL of the document that loaded the current document
removeEventListener() : Removes an event handler from the document (that has been attached with the addEventListener() method)
renameNode() : Deprecated
scripts : Returns a collection of <script> elements in the document
strictErrorChecking : Deprecated
title : Sets or returns the title of the document
URL : Returns the full URL of the HTML document
write() : Writes HTML expressions or JavaScript code to a document
writeln() : Same as write(), but adds a newline character after each statement
The frameElement property returns null if the window does not run in a frame. The frameElement property is read only.
Syntax: window.frameElement or frameElement
Return value: an object: the host of the window (the parent document). Or null if no host exists.
examples
Is this window in a frame?
<div>
<p>Is this window in a frame?</p>
<p id="win-B"></p>
</div>
<script>
let answer = "NO";
if (window.frameElement) {
answer = "YES";
}
document.getElementById("win-B").innerHTML = answer;
</script>
The frames property is read-only. The windows can be accessed by index numbers. The first index is 0.
Syntax: window.frames
Return value: an array: all window objects in the window.
examples
Click the button to change the location of the first iframe element (index 0).
<div>
<p>Click the button to change the location of the first iframe element (index 0).</p>
<button id="btn-D" onclick="changeFunction()">try it</button>
<br><br>
<iframe src="https://www.wikipedia.org" style="width:100%;height:20vw"></iframe>
<iframe src="https://www.wikipedia.org" style="width:100%;height:20vw"></iframe>
</div>
<script>
function changeFunction() {
window.frames[0].location = "https://zh.wikipedia.org";
}
</script>
The history object contains the URLs visited by the user (in the browser window). The history object is a property of the window object and is accessed with: window.history or just history.
History object properties and methods:
back() : Loads the previous URL (page) in the history list
forward() : Loads the next URL (page) in the history list
go() : Loads a specific URL (page) from the history list
length : Returns the number of URLs (pages) in the history list
The innerHeight property is read only.
Syntax: window.innerHeight or innerHeight
Return value: a number. The the inner height of the browser window's content area in pixels.
examples
<div>
<p id="win-C"></p>
<p id="win-D"></p>
</div>
<script>
let w = window.innerWidth;
let h = window.innerHeight;
document.getElementById("win-C").innerHTML = "Width: " + w + "<br>Height: " + h;
let w1 = innerWidth;
let h1 = innerHeight;
document.getElementById("win-D").innerHTML = "Width: " + w1 + "<br>Height: " + h1;
</script>
The innerWidth property is read-only.
Syntax: window.innerWidth or innerWidth
Return value: a number. The the inner width of the browser window's content area in pixels.
examples
<div>
<p id="win-E"></p>
<p id="win-F"></p>
</div>
<script>
let w2= window.innerWidth;
let h2= window.innerHeight;
document.getElementById("win-E").innerHTML = "Width: " + w2 + "<br>Height: " + h2;
let w3 = innerWidth;
let h3 = innerHeight;
document.getElementById("win-F").innerHTML = "Width: " + w3 + "<br>Height: " + h3;
</script>
The length property is read-only. The windows can be accessed by index numbers. The first index is 0.
Syntax: window.length
Return value: a number. The number of windows in the current window.
examples
Number of frames in this window:
<div>
<p>Number of frames in this window:</p>
<p id="win-G"></p>
<iframe style="width:100%;height:5vw"></iframe>
<iframe style="width:100%;height:5vw"></iframe>
<iframe style="width:100%;height:5vw"></iframe>
</div>
<script>
let length = window.length;
document.getElementById("win-G").innerHTML = length;
const frames = window.frames;
for (let i = 0; i < frames.length; i++) {
frames[i].document.body.style.background = "orange";
}
</script>
The data is not deleted when the browser is closed, and are available for future sessions.
Syntax: window.localStorage or localStorage
Save Data to Local Storage: localStorage.setItem(key, value);
Read Data from Local Storage: let lastname = localStorage.getItem(key);
Remove Data from Local Storage: localStorage.removeItem(key);
Remove All (Clear Local Storage): localStorage.clear();
Parameters.
key : required. The name of a key.
value : required. The value of the key.
Return value: an object. A localStorage object.
examples
Saved name is:
<div>
<p>Saved name is:</p>
<p id="win-H"></p>
</div>
<script>
// Set Item
localStorage.setItem("lastname", "Walbers");
// Retrieve
document.getElementById("win-H").innerHTML = localStorage.getItem("lastname");
</script>
The location object contains information about the current URL. The location object is a property of the window object and is accessed with: window.location or just location.
Location object properties
hash : Sets or returns the anchor part (#) of a URL
host : Sets or returns the hostname and port number of a URL
hostname : Sets or returns the hostname of a URL
href : Sets or returns the entire URL
origin : Returns the protocol, hostname and port number of a URL
pathname : Sets or returns the path name of a URL
port : Sets or returns the port number of a URL
protocol : Sets or returns the protocol of a URL
search : Sets or returns the querystring part of a URL
Location object methods
assign() : Loads a new document
reload() : Reloads the current document
replace() : Replaces the current document with a new one
examples
<div>
<p id="win-I"></p>
<p id="win-J"></p>
</div>
<script>
let origin = window.location.origin;
document.getElementById("win-I").innerHTML = origin;
let origin1 = location.origin;
document.getElementById("win-J").innerHTML = origin1;
</script>
A windows does not need to have a name.
Syntax: windowd.name
Set the name property: window.name = winName
Property value: winName : The name of the window.
Return value: a string. The name of the window. Or "view" (If the window has no name).
examples
<div>
<p id="win-K"></p>
<p id="win-L"></p>
</div>
<script>
let name = window.name;
document.getElementById("win-K").innerHTML = name;
window.name = "myWindowName";
document.getElementById("win-L").innerHTML = window.name;
</script>
The navigator object contains information about the browser. The navigator object is a property of the window object and is accessed with: window.navigator or just navigator.
Navigator object properties:
appCodeName : Returns browser code name
appName : Returns browser name
appVersion : Returns browser version
cookieEnabled : Returns true if browser cookies are enabled
geolocation : Returns a geolocation object for the user's location
language : Returns browser language
onLine : Returns true if the browser is online
platform : Returns browser platform
product : Returns browser engine name
userAgent : Returns browser user-agent header
Navigator object methods:
javaEnabled() : Returns true if the browser has Java enabled
taintEnabled() : Removed in JavaScript version 1.2 (1999).
examples
<div>
<p id="win-M"></p>
<p id="win-N"></p>
</div>
<script>
let language = window.navigator.language;
document.getElementById("win-M").innerHTML = "Browser language: " + language;
let language1 = navigator.language;
document.getElementById("win-N").innerHTML = "Browser language: " + language1;
</script>
If window xxx opens window yyy: yyy.opener returns xxx. yyy.opener.close() closes xxx.
Syntax: window.opener
Return value: a window. The window that created the window. .
examples
<div>
<p id="win-O"></p>
<p id="win-P"></p>
Click the button to open a new window that writes "HELLO!" in the opener window.</p>
<button id="btn-D" onclick="openFunction()">try it</button>
</div>
<script>
function openFunction () {
const myWindow = window.open("", "", "width=300,height=300");
myWindow.opener.document.getElementById("win-O").innerHTML = "HELLO!";
}
</script>
The outerHeight property is read only.
Syntax: window.outerHeight or outerHeight
Return value: a number. The height of the browser's window, including all interface elements, in pixels.
examples
<div>
<p id="win-Q"></p>
<p id="win-R"></p>
</div>
<script>
let w4 = window.outerWidth;
let h4 = window.outerHeight;
document.getElementById("win-Q").innerHTML = "Width: " + w4 + "<br>Height: " + h4;
let w5= outerWidth;
let h5 = outerHeight;
document.getElementById("win-R").innerHTML = "Width: " + w5 + "<br>Height: " + h5;
</script>
The outerWidth property is read only.
Syntax: window.outerWidth or outerWidth
Return value: .
examples
<div>
<p id="win-S"></p>
<p id="win-T"></p>
</div>
<script>
let w6 = window.outerWidth;
let h6 = window.outerHeight;
document.getElementById("win-S").innerHTML = "Width: " + w6 + "<br>Height: " + h6;
let w7= outerWidth;
let h7 = outerHeight;
document.getElementById("win-T").innerHTML = "Width: " + w7 + "<br>Height: " + h7;
</script>
The pageXOffset property is equal to the scrollX property. The pageXOffset property is read-only.
Syntax: window.pageXOffset or pageXOffset
Return value: a number. The number of pixels the document has scrolled from the upper left corner of the window. .
examples
Click the button to scroll the document window 100px horizontally and vertically.
<div>
<p>Click the button to scroll the document window 100px horizontally and vertically.</p>
<button onclick="pageFunction()" style="position:relative;">Click me to scroll</button><br><br>
<div id="win-U"></div>
</div>
<style>
#win-U{margin-left: 10vw; background-color: lightblue; height: 20vw; width: 20vw;}
</style>
<script>
function pageFunction() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
The pageYOffset property is equal to the scrollY property. The pageYOffset property is read-only.
Syntax: window.pageYOffset or pageYOffset
Return value: a number. The number of pixels the document has scrolled from the upper left corner of the window. .
examples
Click the button to scroll the document window 100px horizontally and vertically.
<div>
<p>Click the button to scroll the document window 100px horizontally and vertically.</p>
<button onclick="pageFunct()" style="position:relative;">Click me to scroll</button><br><br>
<div id="win-V"></div>
</div>
<style>
#win-V{margin-left: 10vw; background-color: lightblue; height: 20vw; width: 20vw;}
</style>
<script>
function pageFunct() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
The parent property is read-only.
Syntax: window.parent or parent
Return value: an object. The parent window of the current window..
examples
Parent location:
<div>
<p>Parent location:</p>
<p id="win-W"></p>
</div>
<script>
document.getElementById("win-W").innerHTML = window.parent.location;
</script>
The screen object contains information about the visitor's screen.
Screen object properties:
availHeight : Returns the height of the screen (excluding the Windows Taskbar)
availWidth : Returns the width of the screen (excluding the Windows Taskbar)
colorDepth : Returns the bit depth of the color palette for displaying images
height : Returns the total height of the screen
pixelDepth : Returns the color resolution (in bits per pixel) of the screen
width : Returns the total width of the screen .
Syntax: window.screenLeft
Return value: a number. The x (horizontal) position of the window relative to the screen, in pixels..
examples
<div>
<p id="win-X"></p>
</div>
<script>
let x = window.screenLeft;
let y = window.screenTop;
document.getElementById("win-X").innerHTML = "Left: " + x + ", Top: " + y;
</script>
Syntax: window.screenTop
Return value: a number. The y (vertical) position of the window relative to the screen, in pixels.
examples
<div>
<p id="win-Y"></p>
</div>
<script>
let x_A = window.screenLeft;
let y_A = window.screenTop;
document.getElementById("win-Y").innerHTML = "Left: " + x_A + ", Top: " + y_A;
</script>
Syntax: window.screenX or screenX
Return value: a number. The horizontal distance of the window relative to the screen, in pixels.
examples
<div>
<button id="btn-AA" onclick="myScreen()">Open Window</button>
<p id="win-Z"></p>
</div>
<script>
function myScreen() {
const myWin = window.open("", "", "left=700, top=350, width=200, height=100");
let x = myWin.screenX;
let y = myWin.screenY;
document.getElementById("win-Z").innerHTML = "myWin.screenX= " + x + "<br>myWin.screenY= " + y;
}
</script>
Syntax: window.screenY or screenY
Return value: a number. The vertical distance of the window relative to the screen, in pixels.
examples
<div>
<button id="btn-BB" onclick="myScreen1()">Open Window</button>
<p id="win-AA"></p>
</div>
<script>
function myScreen1() {
const myWin = window.open("", "", "left=900, top=350, width=200, height=200");
let x = myWin.screenX;
let y = myWin.screenY;
document.getElementById("win-AA").innerHTML = "myWin.screenX= " + x + "<br>myWin.screenY= " + y;
}
</script>
The scrollX property returns the pixels a document has scrolled from the upper left corner of the window. The scrollX property is read-only. For cross-browser compatibility, use window.pageXOffset instead of window.scrollX.
Syntax: window.scrollX or scrollX
Return value: a number. The number of pixels the document has scrolled from the upper left corner of the window..
examples
Click the button to scroll the document window 100px horizontally and vertically.
<div>
<p>Click the button to scroll the document window 100px horizontally and vertically.</p>
<button onclick="scrollFunction()" style="position:relative;">Click me to scroll</button><br><br>
<div id="win-CC"></div>
</div>
<style>
#win-CC{margin-left: 10vw; background-color: lightblue; height: 20vw; width: 20vw;}
</style>
<script>
function scrollFunction() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
The scrollY property returns the pixels a document has scrolled from the upper left corner of the window. The scrollY property is read-only. For cross-browser compatibility, use window.pageYOffset instead of window.scrollY.
Syntax: window.scrollY or scrollY
Return value: a number. The number of pixels the document has scrolled from the upper left corner of the window..
examples
Click the button to scroll the document window 100px horizontally and vertically.
<div>
<p>Click the button to scroll the document window 100px horizontally and vertically.</p>
<button onclick="scrollFunction1()" style="position:relative;">Click me to scroll</button><br><br>
<div id="win-DD"></div>
</div>
<style>
#win-DD{margin-left: 10vw; background-color: lightblue; height: 20vw; width: 20vw;}
</style>
<script>
function scrollFunction1() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
The data is deleted when the browser is closed.
Syntax: window.sessionStorage or sessionStorage
Save Data to Session Storage: sessionStorage.setItem("key", "value");
Read Data from Session Storage: let lastname = sessionStorage.getItem("key");
Remove Data from Session Storage: sessionStorage.removeItem("key");
Remove All (Clear Session Storage): sessionStorage.clear();
Parameters.
key : required. The name of a key.
value : required. The value of the key.
Return value: an object. A sessionStorage object.
examples
Person Name is:
<div>
<div class="spec" id="win-EE"></div>
</div>
<script>
sessionStorage.setItem("lastname", "Peeters");
let personName = sessionStorage.getItem("lastname");
document.getElementById("win-EE").innerHTML = personName
</script>
The self property is read-only.
Syntax: window.self
Return value: an object. The Window object itself.
examples
<div>
<div class="spec" id="win-FF"></div>
</div>
<script>
let text;
if (window.top != window.self) {
text = "This is not the topmost window! Am I in a frame?";
} else {
text = "This is the topmost window!";
}
document.getElementById("win-FF").innerHTML = text;
</script>
Syntax: window.status
Return value: the text displayed in the status bar.
The top property is read-only.
Syntax: window.top
Return value: an object. The topmost window in the hierarchy of windows in the current browser window.
examples
<div>
<div class="spec" id="win-GG"></div>
</div>
<script>
let text1;
if (window.top != window.self) {
text1 = "This is not the topmost window! Am I in a frame?";
} else {
text1 = "This is the topmost window!";
}
document.getElementById("win-GG").innerHTML = text1;
</script>
Syntax: window.addEventListener(event, function, Capture)
Parameters:
event : required. The event name. Do not use the "on" prefix. Use "click" instead of "onclick".
function : required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object.
capture :optional (default = false). true - the handler is executed in the capturing phase. false - the handler is executed in the bubbling phase.
examples
click anywhere in this window:
<div>
<p>click anywhere in this window:</p>
<p id="win-1"></p>
</div>
<script>
window.addEventListener("click", functionA);
function functionA() {
document.getElementById("win-1").innerHTML = "Hello World";
}
</script>
The alert() method is used when you want information to come through to the user.
The alert box takes the focus away from the current window, and forces the user to read the message.
Syntax: alert(message)
Parameters:
message : optional. The text to display in the alert box.
examples
Click the button to display an alert box.
<div>
<p>Click the button to display an alert box.</p>
<button class="spec" onclick="functionB()">try it</button>
</div>
<script>
function functionB() {
alert("Hello! I am an alert box!");
}
</script>
The atob() method decodes a string that has been encoded by the btoa() method.
Syntax: window.atob(encoded)
Parameters:
encoded : required. The string to be decoded.
examples
<div>
<p id="win-2"></p>
</div>
<script>
let text2 = "Hello World!";
let encoded = window.btoa(text2);
let decoded = window.atob(encoded);
document.getElementById("win-2").innerHTML = "Encoded: " + encoded + "<br>" + "Decoded: " + decoded;
</script>
The blur() method makes a request to bring a window to the background. It may not work as you expect, due to different user settings.
Syntax: window.blur()
Parameters: none
examples
Click the button to open a new window, and blur it (remove focus from it).
<div>
<p>Click the button to open a new window, and blur it (remove focus from it).</p>
<button class="spec" onclick="function3()">Try it</button>
</div>
<script>
function function3() {
var myWindow = window.open("", "", "width=200, height=100");
myWindow.blur();
}
</script>
The btoa() method uses the "A-Z", "a-z", "0-9", "+", "/" and "=" characters to encode the string.
Syntax: window.btoa()
Parameters:
string : required. The string to be encoded.
examples
<div>
<p id="win-3"></p>
</div>
<script>
let text4 = "Hello World!";
let encoded4 = window.btoa(text4);
document.getElementById("win-3").innerHTML = "Original: " + text4 + "<br>Encoded: " + encoded4;
</script>
To clear an interval, use the id returned from setInterval().
Syntax: clearInterval(intervalId)
Parameters:
intervalid : required. The interval id returned from setInterval().
examples
<div>
<p id="win-4"></p>
<button class="spec" onclick="function4()">Stop the time</button>
</div>
<script>
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("win-4").innerHTML = date.toLocaleTimeString();
}
function function4() {
clearInterval(myInterval);
}
</script>
To clear a timeout, use the id returned from setTimeout().
Syntax: clearTimeout(id_of_settimeout)
Parameters:
timeout id : required. The id returned by the setTimeout() method.
examples
Click the button to prevent the timeout to execute. (You have 3 seconds).
<div>
<p>Click the button to prevent the timeout to execute. (You have 3 seconds).</p>
<h4 class="spec" id="win-5"></h4>
<button class="spec" onclick="function5()">Stop it</button>
</div>
<script>
const myTimeout = setTimeout(myGreeting, 3000);
function myGreeting() {
document.getElementById("win-5").innerHTML = "Happy Birthday!"
}
function function5() {
clearTimeout(myTimeout);
}
</script>
Syntax: window.close
Parameters: none
examples
<div>
<button class="spec" onclick="function6()">Open "myWindow"</button>
<button class="spec" onclick="function7()">Close "myWindow"</button>
</div>
<script>
let myWindow1;
function function6() {
myWindow1 = window.open("", "", "width=200,height=100");
}
function closeWin() {
myWindow1.close();
}
</script>
The confirm() method returns true if the user clicked "OK", otherwise false.
A confirm box takes the focus away from the current window, and forces the user to read the message.
Syntax: confirm(message)
Parameters:
message : optional. The text to display in the confirm box.
examples
Click the button to display a confirm box.
Click the button to see line-breaks in a confirm box.
<div>
<p>Click the button to display a confirm box.</p>
<button class="spec" onclick="function8()">try it</button>
<p>Click the button to see line-breaks in a confirm box.</p>
<button class="spec" onclick="function9()">Try it</button>
<p id="win-6"></p>
</div>
<script>
function function8() {
confirm("Press a button!");
}
function function9() {
let text = "Press a button!\nEither OK or Cancel.";
if (confirm(text) == true) {
text = "You pressed OK!";
} else {
text = "You canceled!";
}
document.getElementById("win-6").innerHTML = text;
}
</script>
The focus() method makes a request to bring a window to the front. It may not work as you expect, due to different user settings.
Syntax: window.focus()
Parameters: none
examples
Click the button to open a new window, and set focus to it.
<div>
<p>Click the button to open a new window, and set focus to it.</p>
<button class="spec" onclick="function10()">try it</button>
</div>
<script>
function function10() {
const myWindow = window.open("", "", "width=200,height=100");
myWindow.focus();
}
</script>
The getComputedStyle() method gets the computed CSS properties and values of an HTML element. The getComputedStyle() method returns a CSSStyleDeclaration object.
The computed style is the style used on the element after all styling sources have been applied. Style sources: external and internal style sheets, inherited styles, and browser default styles.
Syntax: window.getComputedStyle(element, pseudoElement)
Parameters:
element : required. The element to get the computed style for.
pseudoElement : optional. A pseudo-element to get.
examples
The computed background color for the test div is:
<div>
<h4 id="test" style="background-color:lightblue; color:red" >The getComputedStyle() Method</h4>
<p>The computed background color for the test div is:</p>
<p id="win-7"></p>
<p id="win-8"></p>
</div>
<script>
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
document.getElementById("win-7").innerHTML = "background-color: " +bgColor;
let color = cssObj.getPropertyValue("color");
document.getElementById("win-8").innerHTML = "color: " + color;
</script>
Syntax: window.getSelection()
Parameters: none
The media queries of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.
Syntax: window.matchMedia(mediaQuery)
Parameters:
mediaQuery : required. A string representing a media query.
examples
<div>
<p id="win-9"></p>
</div>
<script>
let text6;
if (window.matchMedia("(max-width: 700px)").matches) {
text6= "The screen is less or equal to, 700 pixels wide.";
} else {
text6 = "The screen is at least 700 pixels wide.";
}
document.getElementById("win-9").innerHTML = text6;
</script>
The moveBy() method moves a window a number of pixels relative to its current coordinates.
Syntax:window.moveBy(x, y)
Parameters:
x : required. A positive or negative number.The number of pixels to move the window horizontally.
y : required. A positive or negative number.The number of pixels to move the window vertically.
examples
Open "myWindow" and move the new window 250px relative to its current position:
<div>
<p>Open "myWindow" and move the new window 250px relative to its current position:</p>
<button class="spec" onclick="function11()">Open "myWindow"</button>
<button onclick="function12()">Move "myWindow"</button>
</div>
<script>
let myWindow2;
function function11() {
myWindow2 = window.open("", "", "width=400, height=400");
}
function function12() {
myWindow2.moveBy(150, 100);
}
</script>
The moveTo() method moves a window to the specified coordinates.
Syntax:window.moveTo(x, y)
Parameters:
x : required. A positive or negative number. The horizontal coordinate to move to.
y : required. A positive or negative number. The vertical coordinate to move to.
examples
Open "myWindow" and move the it to the position 500 x 100:
<div>
<p>Open "myWindow" and move the it to the position 500 x 100:</p>
<button class="spec" onclick="function12()">Open "myWindow"</button>
<button onclick="function13()">Move "myWindow"</button>
</div>
<script>
let myWindow3;
function function12() {
myWindow3 = window.open("", "", "width=400, height=200");
}
function function13() {
myWindow3.moveTo(500, 100);
}
</script>
The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.
Syntax:window.open(URL, name, specs, replace)
Parameters:
URL : optional. The URL of the page to open. If no URL is specified, a new blank window/tab is opened
name : optional. The target attribute or the name of the window. The following values are supported: _blank, _parent, _self, _top, name
specs : optional. A comma-separated list of items, no whitespaces. The following values are supported: fullscreen=yes|no|1|0, height=pixels, left=pixels, location=yes|no|1|0, menubar=yes|no|1|0, resizable=yes|no|1|0, scrollbars=yes|no|1|0, status=yes|no|1|0, titlebar=yes|no|1|0, toolbar=yes|no|1|0, top=pixels, width=pixels.
replace : deprecated. Specifies whether the URL creates a new entry or replaces the current entry in the history list.
examples
Click the button to open a new browser window.
<div>
<p>Click the button to open a new browser window.</p>
<button class="spec" onclick="function13()">Try it</button>
</div>
<script>
function function13() {
window.open("https://www.lwitters.com", '', 'width=600, height=600, resizable=yes, left=500');
}
</script>
The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.
Syntax: window.print()
Parameters: none
examples
Click the button to print the current page.
<div>
<p>Click the button to print the current page.</p>
<button class="spec" onclick="window.print()">Print this page</button>
</div>
<script>
</script>
The prompt() method returns the input value if the user clicks "OK", otherwise it returns null.
A prompt box is used if you want the user to input a value. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed.
Syntax: prompt(text, defaultText)
Parameters:
text : optional. The text to display in the dialog box.
defaultText : optional. The default input text.
examples
Click the button to demonstrate the prompt box.
<div>
<p>Click the button to demonstrate the prompt box.</p>
<button class="spec" onclick="function14()">try it</button>
<p id="win-10"></p>
</div>
<script>
function function14() {
let person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("win-10").innerHTML = "Hello " + person + "! How are you today?";
}
}
</script>
Syntax: window.removeEventListener(event, function, capture)
Parameters:
event : required. The name of the event to remove. Do not use the "on" prefix. use "click" instead of "onclick".
function : required. The function to remove.
capture : optional (default = false). true - Remove the handler from capturing. false- Remove the handler from bubbling. If the event handler was attached two times, one with capturing and one with bubbling, each must be removed separately.
examples
A mousemove event handler displays a random number every time you move the mousepointer over this document.
Click "Remove" to remove the event handler.
<div>
<p>A mousemove event handler displays a random number every time you move the
mousepointer over this document.</p>
<p>Click "Remove" to remove the event handler.</p>
<button class="spec" onclick="function15()">Remove</button>
<p id="win-11"></p>
</div>
<script>
window.addEventListener("mousemove", function16);
function function16() {
document.getElementById("win-11").innerHTML = Math.random();
}
function function15() {
window.removeEventListener("mousemove", function16);
}
</script>
Syntax:
Parameters:
The resizeBy() method resizes a window by a specified amount.
Syntax: resizeBy(width, height)
Parameters:
width : required. A positive or a negative number. The number of pixels to resize the width by.
height : required. A positive or a negative number. The number of pixels to resize the height by.
examples
Open a new window, and resize it:
Press "Resize window" multiple times (the window will increase each time).
<div>
<p>Open a new window, and resize it:</p>
<p>Press "Resize window" multiple times (the window will increase each time).</p>
<button class="spec" onclick="function17()">Create window</button>
<button onclick="function18()">Resize window</button>
</div>
<script>
let myWindow5;
function function17() {
myWindow5 = window.open("", "", "width=100, height=100");
}
function function18() {
myWindow5.resizeBy(250, 250);
}
</script>
The resizeTo() method resizes a window to a new width and height.
Syntax: window.resizeTo(width, height)
Parameters:
width : required. The new window width, in pixels
height : required. The new window height, in pixels
examples
Open a new window, and resize it to 300 x 300
<div>
<p>Open a new window, and resize it to 300 x 300</p>
<button class="spec" onclick="function19()">Create window</button>
<button onclick="function20()">Resize window</button>
</div>
<script>
let myWindow6;
function function19() {
myWindow6 = window.open("", "", "width=200, height=100");
}
function function20() {
myWindow6.resizeTo(300, 300);
}
</script>
For the scrollBy() method to work, the document must be larger than the screen, and the scrollbar must be visible.
Syntax: window.scrollBy(x, y) or scrollBy(x, y)
Parameters:
x : required. Number of pixels to scroll (horizontally). Positive values scroll to the right, negative values to the left.
y : required. Number ofpixels to scroll (vertically). Positive values scroll down, negative values scroll up.
examples
<div>
<p>Click to scroll the document.</p>
<p>Look at the horizontal scrollbar to see the effect.</p>
<button onclick="function21()" style="position:fixed">Scroll 100px
horizontally!</button>
<br><br>
</div>
<style>
body {width: 5000px}
button {position:fixed}
</style>
</style>
<script>
function function21() {
window.scrollBy(100, 0);
}
</script>
For the scrollTo() method to work, the document must be larger than the screen, and the scrollbar must be visible.
Syntax: window.scrollTo(x, y) or scrollTo(x, y)
Parameters:
x : required. The coordinate to scroll to (horizontally), in pixels.
y : required. The coordinate to scroll to (vertically), in pixels.
examples
<div>
<p>Click to scroll the document.</p>
<button onclick="function22()" style="position:fixed">Scroll to 200px
horizontally!</button>
<br><br>
</div>
<style>
body {width: 5000px}
button {position:fixed}
</style>
</style>
<script>
function function22() {
window.scrollTo(200, 0);
}
</script>
The setInterval() method calls a function at specified intervals (in milliseconds). The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.
1 second = 1000 milliseconds.
To execute the function only once, use the setTimeout() method instead. To clear an interval, use the id returned from setInterval().
Syntax: setInterval(function, milliseconds, param1, param2, ...)
Parameters:
function : required. The function to execute
milliseconds : required. The execution interval. If the value is less than 10, 10 is used
param1, param2,.. : optional. Additional parameters to pass to the function. Not supported in IE9 and earlier.
examples
<div>
<p id="win-14"></p>
</div>
<script>
const element1 = document.getElementById("win-14");
setInterval(function() {element1.innerHTML += "Hello"}, 3000);
</script>
The setTimeout() is executed only once. If you need repeated executions, use setInterval() instead. Use the clearTimeout() method to prevent the function from starting. To clear a timeout, use the id returned from setTimeout().
Syntax: setTimeout(function, milliseconds, param1, param2, ...)
Parameters:
function : required. The function to execute
milliseconds : optional. Number of milliseconds to wait before executing. Default value is 0.
param1, param2,.. : optional. Additional parameters to pass to the function. Not supported in IE9 and earlier.
examples
Wait 5 seconds for the greeting:
<div>
<p>Wait 5 seconds for the greeting:</p>
<h4 class="spec" id="win-15"></h4>
</div>
<script>
const myTimeout1 = setTimeout(myGreeting, 5000);
function myGreeting() {
document.getElementById("win-15").innerHTML = "Happy Birthday!"
}
</script>
The stop() method is the same as clicking stop in the browser. The stop() method can be used to stop loading an image if it takes too long.
Syntax: window.stop()
Parameters: none
examples
<div>
<p>The stop() method stops this document from loading.</p>
</div>
<script>
window.stop();
</script>
<div class="app">
<div class="child"></div>
</div>
<style>
.child {margin-left: 2vw; width: 100%;/* Key Style */height: 100vh;background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
</style>
text comes here.... .
<div class="container" style="margin-left:5vw;">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input type="text" value="http://www.lwitters.com">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<h3>Browser Window</h3>
<p class="spec" style="margin-left:2vw;">text comes here.... .</p>
</div>
</div>
<style>
.container > * {box-sizing: border-box;}
.container {border: 0.3vw solid black; border-top-left-radius: 0.5vw; border-top-right-radius: 0.5vw;}
.row {padding: 1vw; background: aqua;border-top-left-radius: 0.5vw; border-top-right-radius: 0.5vw;}
.column {float: left;}
.left {width: 15%;}
.right {width: 10%;}
.middle {width: 75%;}
.row:after {content: ""; display: table; clear: both;}
.dot {margin-top: 0.4vw; height: 1.2vw; width: 1.2vw; background-color: #bbb;border-radius: 50%; display: inline-block;}
input[type=text] {width: 100%; border-radius: 0.5vw; border: none; background-color: lightblue; margin-top: -.1vw;
height: 2.5vw; color: black; padding: 0.5vw; font-size: 1vw;}
.bar {width: 1.7vw; height: 0.3vw; background-color: green; margin: 0.3vw 0; display: block;}
.content {padding: 1vw;}
</style>