Contribute via GitHub Feedback

Window : Global

Window is the global object in the browser that represents the browser window for the page. The window object itself is available through the window property and all properties on the Window are available directly in scripts. The Window object is also available as this in the root scope of a script (ie, outside of any Function).

Instance Properties

applicationCache : ApplicationCache readonly

crypto : Crypto

customElements : CustomElementRegistry readonly

Provides a way to extend HTML/DOM with your own elements that have custom logic similar to built in elements. See also CustomElementPrototype.

Example:

<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      // Hook up click listener to set the color to red
      this.addEventListener('click', function(event) {
        event.target.style.color = 'red';
      });
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);
</script>

Results:

document : Document readonly

Returns the document for this window.

Example:

<div>Hello World</div>
<script>
  console.log(document.body.firstChild.textContent);
</script>

Results:

external : External readonly

frameElement : Element readonly

frames : Window readonly

globalThis : Window readonly

Returns the global object for the browser. Also available through the window property, self property, and this in the root scope.

Example:

<script>
  console.log(globalThis === this);
  console.log(globalThis === window);
  console.log(globalThis === self);
  console.log(globalThis === globalThis.globalThis);

  const myLink = {
    location: 'my-link-location',
    click() {
      console.log(`this.location: ${this.location}`);
      console.log(`globalThis.location: ${globalThis.location}`);
    }
  };

  myLink.click();
</script>

Results:

ECMAScript 2020

history : History readonly

Represents the user's browser history and allows the page to manipulate the history by adding pages or navigating between pages. See History for more details.

Example:

<button onclick='pushState()'>Push State</button><br>
<button onclick='replaceState()'>Replace State</button><br>
<button onclick='history.back()'>Back</button><br>
<button onclick='history.forward()'>Forward</button><br>
<input id='goAmount' value='-1'><button onclick='go()'>Go</button>
<div>
  history.state = <span id='historyState'></span>
</div>
<div>
  history.length = <span id='historyLength'></span>
</div>
<div>
  href = <span id='locationHref'></span>
</div>
<script>
  var onStateChange = function() {
    document.getElementById('historyState').textContent = history.state;
    document.getElementById('historyLength').textContent = history.length;
    document.getElementById('locationHref').textContent = location.href;
  };

  window.onpopstate = onStateChange;

  onStateChange();

  var pushState = function() {
    var newState = (history.state || 0) + 1;
    history.pushState(newState, 'Pushed: ' + newState, '/History?state=' + newState);
    onStateChange();
  };

  var replaceState = function() {
    var newState = (history.state || 0) + 1;
    history.replaceState(newState, 'Replaced: ' + newState, '/History?state=' + newState);
    onStateChange();
  };

  var go = function() {
    var amount = +document.getElementById('goAmount').value;
    history.go(amount);
  };
</script>

Results:

indexedDB : IDBFactory

innerHeight : Number readonly

Height of the browser window in CSS pixels excluding any browser chrome.

Example:

console.log(window.innerHeight);
console.log(window.outerHeight);
console.log(screen.availHeight);
console.log(screen.height);

Results:

innerWidth : Number readonly

Width of the browser window in CSS pixels exluding any browser chrome.

Example:

console.log(window.innerWidth);
console.log(window.outerWidth);
console.log(screen.availWidth);
console.log(screen.width);

Results:

length : Number readonly

localStorage : Storage readonly

localStorage allows saving data in the web browser that can be retrieved in future views of the web page. The data is saved across browser sessions and computer reboots. See also sessionStorage and Storage for more details.

Example:

<input id='tosave'>
<button onclick='save()'>Save</button>
<div id='lastsaved'></div>
<script>
  var lastSavedElement = document.getElementById('lastsaved');
  lastSavedElement.textContent = localStorage['saved'];

  var save = function() {
    var value = document.getElementById('tosave').value;
    localStorage['saved'] = value
    lastSavedElement.textContent = value;
  };
</script>

Results:

location : Location readonly

Describes the url of the current page. See Location for more details.

Example:

<script>
  console.log(location.href);
  console.log(location.protocol);
  console.log(location.hostname);
  console.log(location.pathname);
  console.log(location.search);
  console.log(location.hash);
</script>

Results:

name : String

navigator : Navigator

opener : Window

outerHeight : Number readonly

Height of the browser window in CSS pixels including any browser chrome.

Example:

console.log(window.outerHeight);

Results:

outerWidth : Number readonly

Width of the browser window in CSS pixels including any browser chrome.

Example:

console.log(window.outerWidth);

Results:

pageXOffset : Number readonly

pageYOffset : Number readonly

parent : Window readonly

screen : Screen readonly

screenX : Number readonly

X position of the top left corner of the browser in pixels. See screen for details about the size of the screen.

Example:

console.log(window.screenX);

Results:

screenY : Number readonly

Y position of the top left corner of the browser in pixels. See screen for details about the size of the screen.

Example:

console.log(window.screenY);

Results:

scrollX : Number readonly

scrollY : Number readonly

self : Window readonly

Returns the global object for the browser. Also available through the window property and through this in the root scope.

Example:

<script>
  // At the root scope, 'this' is the window.
  console.log(this === window);
  console.log(window === self);
  console.log(window === window.window);
  console.log(window === window.self);
</script>

Results:

sessionStorage : Storage readonly

sessionStorage allows saving data in the web browser that can be retrieved in future views of the web page. The data is only saved for the current session, that is until the user closes the web browser. See also localStorage and Storage for more details.

Example:

<input id='tosave'>
<button onclick='save()'>Save</button>
<div id='lastsaved'></div>
<script>
  var lastSavedElement = document.getElementById('lastsaved');
  lastSavedElement.textContent = sessionStorage['saved'];

  var save = function() {
    var value = document.getElementById('tosave').value;
    sessionStorage['saved'] = value
    lastSavedElement.textContent = value;
  };
</script>

Results:

status : String

top : Window readonly

window : Window readonly

Returns the global object for the browser. Also available through the self property, through this in the root scope, and through the globalThis property (in ECMAScript 2020).

Example:

<script>
  // At the root scope, 'this' is the window.
  console.log(this === window);
  console.log(window === self);
  console.log(window === window.window);
  console.log(window === window.self);
</script>

Results:

Instance Methods

alert(message : String) : undefined

Displays a message box to the user with the specified message. Script execution is paused while the message box is displayed. See also confirm() and prompt().

Example:

<button onclick="alert('In alert')">Show alert</button>

Results:

atob(unencoded : String) : String

Converts an ascii encoded string (base64) into a unicode/binary string. See also btob().

Example:

<script>
  var string = 'Hello world!';
  var base64 = btoa(string);
  var decoded = atob(base64);

  console.log(base64);
  console.log(decoded);
</script>

Results:

blur() : undefined

btoa(encoded : String) : String

Converts a unicode/binary string into an ascii encoded string (base64). See also atob().

Example:

<script>
  var string = 'Hello world!';
  var base64 = btoa(string);
  var decoded = atob(base64);

  console.log(base64);
  console.log(decoded);
</script>

Results:

cancelAnimationFrame(handle : Number) : undefined

Stops an animation frame callback from running. handle is the value returned by requestAnimationFrame().

Example:

<script>
  var handle1 = requestAnimationFrame(function() {
    console.log('in animation callback 1');
  });

  var handle2 = requestAnimationFrame(function() {
    console.log('in animation callback 2');
  });

  cancelAnimationFrame(handle1);
</script>

Results:

clearInterval(handle : Number) : undefined

Stops an setInterval() callback from running. handle is the value returned by setInterval().

Example:

<script>
  var callCount = 0;

  var handle = setInterval(function(parameter1, parameter2) {
    console.log('in callback count=' + callCount);
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);

    callCount++;
    if (callCount === 5) {
      clearInterval(handle);
    }
  }, 500, 'foo', 'bar');
</script>

Results:

clearTimeout(handle : Number) : undefined

Stops a timeout from running. handle is the value returned by setTimeout().

Example:

<script>
  var handle1 = setTimeout(function() {
    console.log('in timeout callback 1');
  }, 100);

  var handle2 = setTimeout(function() {
    console.log('in timeout callback 2');
  }, 100);

  clearTimeout(handle1);
</script>

Results:

close() : undefined

confirm(message : String) : Boolean

Displays an Ok/Cancel message box to the user with the specified message. Returns true if the user clicked Ok. Script execution is paused while the message box is displayed. See also alert() and prompt().

Example:

<button onclick="showConfirm()">Show confirm</button>
<script>
  var showConfirm = function() {
    if (confirm('In confirm')) {
      console.log('user clicked ok');
    }
    else {
      console.log('user clicked cancel');
    }
  };
</script>

Results:

createImageBitmap 13 variants

createImageBitmap(source : HTMLImageElement) : Promise<ImageBitmap>

Example:

<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = '/pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : HTMLVideoElement) : Promise<ImageBitmap>

Example:

<button>Play</button><br>
<canvas></canvas>
<script>
document.querySelector('button').onclick = async () => {
  const video = document.createElement('video');
  video.muted = true;
  video.src = 'fireworks.ogv';
  await new Promise(r => {
    video.oncanplay = r;
    video.load();
  });

  const canvas = document.querySelector('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const context = canvas.getContext('bitmaprenderer');

  const draw = async () => {
    const imageBitmap = await createImageBitmap(video);
    context.transferFromImageBitmap(imageBitmap);

    if (!video.paused) {
      requestAnimationFrame(draw);
    }
  };
  video.play();
  draw();
};
</script>

Results:

createImageBitmap(source : HTMLCanvasElement) : Promise<ImageBitmap>

Example:

<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageBitmap = await createImageBitmap(src);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : Blob) : Promise<ImageBitmap>

Example:

<canvas></canvas>
<script>
(async () => {
  const res = await fetch('/pic.jpg');
  const blob = await res.blob();
  const imageBitmap = await createImageBitmap(blob);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : ImageData) : Promise<ImageBitmap>

Example:

<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageData = srcContext.getImageData(0, 0, 150, 150);

  const imageBitmap = await createImageBitmap(imageData);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : HTMLImageElement, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = 'pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : HTMLVideoElement, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<button>Play</button><br>
<canvas></canvas>
<script>
document.querySelector('button').onclick = async () => {
  const video = document.createElement('video');
  video.muted = true;
  video.src = '/fireworks.ogv';
  await new Promise(r => {
    video.oncanplay = r;
    video.load();
  });

  const canvas = document.querySelector('canvas');
  canvas.width = 200;
  canvas.height = 200;
  const context = canvas.getContext('bitmaprenderer');

  const draw = async () => {
    const imageBitmap = await createImageBitmap(video, {
      imageOrientation: 'flipY',
      resizeWidth: canvas.width,
      resizeHeight: canvas.height,
      resizeQuality: 'pixelated'
    });
    context.transferFromImageBitmap(imageBitmap);

    if (!video.paused) {
      requestAnimationFrame(draw);
    }
  };

  video.play();
  draw();
};
</script>

Results:

createImageBitmap(source : HTMLCanvasElement, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageBitmap = await createImageBitmap(src, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : Blob, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<canvas></canvas>
<script>
(async () => {
  const res = await fetch('/pic.jpg');
  const blob = await res.blob();
  const imageBitmap = await createImageBitmap(blob, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : ImageData, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageData = srcContext.getImageData(0, 0, 150, 150);

  const imageBitmap = await createImageBitmap(imageData,
    {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : ImageBitmap, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

Results:

createImageBitmap(source : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number) : Promise<ImageBitmap>

Example:

<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = '/pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, 10, 100, 140, 80);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

createImageBitmap(source : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number, [options : Object]) : Promise<ImageBitmap>

options : {

imageOrientation :	String	One of `'none'` or `'flipY'`. Default is `'none'`.
premultiplyAlpha :	String	One of `'none'`, `'premultiply'`, or `'default'`. Default is `'default'`.
colorSpaceConversion :	String	One of `'none'` or `'default'`. Default is `'default'`.
resizeWidth :	Number
resizeHeight :	Number
resizeQuality :	String	One of `'pixelated'`, `'low'`, `'medium'`, or `'high'`. Default is `'low'`.

}

Example:

<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = 'pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, 10, 100, 140, 80, {
      imageOrientation: 'flipY',
      resizeWidth: 300,
      resizeHeight: 300,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>

Results:

fetch 2 variants

fetch(request : Request, [requestInit : Object]) : Promise<Response>

Fetches the specified web request. If requestInit is specified, its values overwrite the values on request. See also Request and Response.

Example:

<script>
  var request = new Request('/', { method: 'HEAD' });
  fetch(request).then(function(response) {
    for (var kvp of response.headers) {
      console.log(kvp[0] + ': ' + kvp[1]);
    }
  });
</script>

Results:

fetch(url : String, [requestInit : Object]) : Promise<Response>

Fetches the specified url. See also Request and Response.

Example:

<script>
  fetch('/').then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log(text.substring(0, 30));
  });
</script>

Results:

focus() : undefined

getComputedStyle(element : Element, [pseudoElement : String]) : CSSStyleDeclaration

Computes the effective style for element including all CSS rules that apply to element. See also element.style.

Example:

<style>
  .bar { font-weight: bold;  }
</style>
<span id='foo' class='bar' style='color: red'>foo</span>
<script>
  var foo = document.getElementById('foo');

  console.log('color:  ' + foo.style.color);
  console.log('weight: ' + foo.style.fontWeight);

  var computedStyle = window.getComputedStyle(foo);
  console.log('computed color:  ' + computedStyle.color);
  console.log('computed weight: ' + computedStyle.fontWeight);
</script>

Results:

matchMedia(query : String) : MediaQueryList

open([url : String, [target = '_blank' : String, [features : String, [replace : Boolean]]]]) : Window

Opens a new tab or window for the specified url.

url

the url to open or '' to open an empty window.

target

must be one of:

'_blank': open in new window, the default
'_parent': open in parent page/frame
'_self': open in current page/frame
'_top': open in top page
'<name>': open in the window with the specified name

features

is a comma separated list of '<name>=<value>' pairs where the valid names are 'left', 'top', 'height', 'width'.

replace

pass true to replace the contents instead of opening a new window.

Example:

<button onclick="openWindow()">Open Window</button>
<script>
  var openWindow = function() {
    var width = screen.availWidth * .5;
    var height = screen.availHeight * .75;
    var left = (screen.availWidth - width) / 2;
    var top = (screen.availHeight - height) / 2;
    var newWindow = window.open('', '_blank', `left=${left},top=${top},width=${width},height=${height}`);
    newWindow.document.title = 'My Window';
    newWindow.document.body.innerHTML = 'new window content';
    newWindow.onunload = function() {
      console.log('window closed');
    };
  };
</script>

Results:

postMessage(message : Object, expectedOrigin : String, [transfer : Array<Transferable>]) : undefined

Sends message to this (usually something other than the global window, like the parent, iframe contentwindow, or return value of open()). The message will be available in the MessageEvent.data property on the event passed to the onmessage event listener. To ensure the window's content has not changed while the message is in flight, expectedOrigin must match this.origin (or be '*' to ignore check and possibly send the message to another site). The elements of objectsToTransfer will be transferred to the JavaScript context that owns this and no longer available in the context that called postMessage().

See also BroadcastChannel and MessageChannel.

Example:

<iframe id='iframe'></iframe>

<script id='iframeCode' type ='text/plain'>
  var intArray = new Int32Array([17, 58]);
  var message = { foo: 'bar', ints: intArray };
  parent.postMessage(message, '*', [intArray.buffer]);
  // intArray is no longer valid
</script>

<script>
  window.onmessage = function(event) {
    console.log('Received:');
    console.dir(event.data);
  };

  var iframe = document.querySelector('#iframe');

  var code = document.getElementById('iframeCode').textContent;
  var html = '<script>' + code + '</' + 'script>';
  var blob = new Blob([html], { type: 'text/html' });

  iframe.src = URL.createObjectURL(blob);
</script>

Results:

print() : undefined

prompt(message : String, [default : String]) : String

Displays a message box containing an input box to the user with the specified message. The input box will be prepopulated with default if it is specified. Returns the String the user typed in the input box if the user clicks ok and null if they click cancel. Script execution is paused while the message box is displayed. See also alert() and confirm().

Example:

<button onclick="showPrompt()">Show prompt</button>
<script>
  var showPrompt = function() {
    var result = prompt('In prompt', 'With default');

    if (result !== null) {
      console.log('prompt returned "' + result + '"');
    }
    else {
      console.log('user clicked cancel');
    }
  };
</script>

Results:

reportError(error : Object) : undefined

Fires the error event with the specified error. Unlike throw error, this will always cause the error event to fire, even if there is a catch handler around the call.

Example:

<script>
window.onerror = function(message, source, line, column, error) {
  console.log(message);
  console.log(source);
  console.log(line);
  console.log(column);
  console.log(error);
};

try {
  reportError(Error('reportedException'));
  console.log('');
  throw Error('handledException');
}
catch {}

throw Error('unhandledException');
</script>

Results:

requestAnimationFrame(callback : Function) : Number

callback(time : Number) : undefined

Schedules callback to be called before the next time the browser renders a frame to the screen. Must be called each time you'd like to schedule another frame. The time parameter to callback is the number of milliseconds since the page loaded. Returns a unique handle that can be passed to cancelAnimationFrame() to stop callback from being called.

Example:

<button onclick='play()'>play</button>
<button onclick='stop()'>stop</button><br>
<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var id = -1;
  var callback = function(time) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillRect(10, 10, 30 * (Math.sin(time / 1000) + 1), 30);
    context.fillText(time, 10, 75);

    id = requestAnimationFrame(callback);
  };

  var play = function() {
    if (id === -1) {
      id = requestAnimationFrame(callback);
    }
  };
  var stop = function() {
    cancelAnimationFrame(id);
    id = -1;
  };
</script>

Results:

setInterval 2 variants

setInterval(callback : Function, [timeout : Number, [...]]) : Number

Schedules callback to be called repeatedly, every timeout milliseconds. Any extra parameters after timeout are passed to callback. Returns a unique handle that can be passed to clearInterval() to stop callback from being called. See also setTimeout() and requestAnimationFrame().

Example:

<script>
  var callCount = 0;

  var handle = setInterval(function(parameter1, parameter2) {
    console.log('in callback count=' + callCount);
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);

    callCount++;
    if (callCount === 3) {
      clearInterval(handle);
    }
  }, 500, 'foo', 'bar');
</script>

Results:

setInterval(callback : String, [timeout : Number, [...]]) : Number

Same as setInterval() where the callback string is passed to eval when the time has elapsed.

setTimeout 2 variants

setTimeout(callback : Function, [timeout = 0 : Number, [...]]) : Number

Schedules callback to be called once after timeout milliseconds. Any extra parameters after timeout are passed to callback. Returns a unique handle that can be passed to clearTimeout() to stop callback from being called. See also setInterval() and requestAnimationFrame().

Example:

<script>
  var handle = setTimeout(function(parameter1, parameter2) {
    console.log('in callback');
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);
  }, 1000, 'foo', 'bar');
  console.log('after setTimeout');
</script>

Results:

setTimeout(callback : String, [timeout = 0 : Number, [...]]) : Number

Same as setTimeout() where the callback string is passed to eval when the time has elapsed.

showDirectoryPicker([options : Object]) : Promise<FileSystemDirectoryHandle>

options : {

id :	String
startIn :	Object	Either a String or FileSystemHandle

}

Specifying options.id will cause the browser to remember the directory of the chosen file so another call to showSaveFilePicker with the same id will start in that directory.

Example:

startIn: <select id="startIn">
  <option>desktop</option>
  <option>documents</option>
  <option>downloads</option>
  <option>music</option>
  <option selected>pictures</option>
  <option>videos</option>
</select><br>
<button onclick="openDirectory()">Open Directory</button>
<script>
  const openDirectory = async () => {
    try {
      const directoryHandle = await showDirectoryPicker({
        startIn: document.getElementById('startIn').value,
      });
      console.log(`${directoryHandle.name}:`);
      for await (const [name, fileHandle] of directoryHandle) {
        console.log(' ', name, fileHandle.kind);
      }
    }
    catch (e) {
      console.log(e);
    }
  };
</script>

Results:

showModalDialog(url : String, [arguments : Object]) : Object

showOpenFilePicker([options : Object]) : Promise<Array<FileSystemFileHandle>>

options : {

excludeAcceptAllOption :	Boolean
id :	String
multiple :	Boolean
startIn :	Object	Either a String or FileSystemHandle
types :	Array

}

Specifying options.id will cause the browser to remember the directory of the chosen file so another call to showSaveFilePicker with the same id will start in that directory. See spec for complete details.

Example:

<label><input id="excludeAcceptAllOption" type="checkbox">excludeAcceptAllOption</label><br>
<label><input id="multiple" type="checkbox">multiple</label><br>
startIn: <select id="startIn">
  <option>desktop</option>
  <option>documents</option>
  <option>downloads</option>
  <option>music</option>
  <option selected>pictures</option>
  <option>videos</option>
</select><br>
<button onclick="openFile()">Open File</button>
<div id="output"><div>
<script>
  const openFile = async () => {
    try {
      const fileHandles = await showOpenFilePicker({
        excludeAcceptAllOption: document.getElementById('excludeAcceptAllOption').checked,
        multiple: document.getElementById('multiple').checked,
        startIn: document.getElementById('startIn').value,
        types: [
          {
            description: 'Raster Image Files',
            accept: {
              'image/*': ['.png', '.jpeg', '.jpg']
            }
          },
          {
            description: 'Vector Image Files',
            accept: {
              'image/*': '.svg'
            }
          }
        ],
      });
      console.log(`Got ${fileHandles.length} files`);

      const files = await Promise.all(fileHandles.map(handle => handle.getFile()));

      const images = files.map(file => {
        const image = new Image();
        image.src = URL.createObjectURL(file);
        image.onload = () => URL.revokeObjectURL(file);
        return image;
      });

      document.getElementById('output').replaceChildren(...images);
    }
    catch (e) {
      console.log(e);
    }
  };
</script>

Results:

showSaveFilePicker([options : Object]) : Promise<FileSystemFileHandle>

options : {

excludeAcceptAllOption :	Boolean
id :	String
multiple :	Boolean
startIn :	Object	Either a String or FileSystemHandle
suggestedName :	String
types :	Array

}

Specifying options.id will cause the browser to remember the directory of the chosen file so another call to showSaveFilePicker with the same id will start in that directory.

Example:

Results:

stop() : undefined

structuredClone(value : Object, [transfer : Array<Transferable>]) : Object

Creates a deep clone of value. Elements of value in transfer will be transferred to the new object and will no longer be useable on value.

Example:

const toClone = { a: 1, b: 2 };
const clone = structuredClone(toClone);

console.dir(toClone);
console.dir(clone);

toClone.a = 'changed';

console.dir(toClone);
console.dir(clone);

Results:

Instance Events

onabort / 'abort' event

listener(event : Event) : undefined

onafterprint / 'afterprint' event

listener(event : Event) : undefined

onbeforeprint / 'beforeprint' event

listener(event : Event) : undefined

onbeforeunload / 'beforeunload' event

listener(event : BeforeUnloadEvent) : String

Called before the page is navigated away from. Return a non-empty String from listener to display a dialog box that gives the user the option to remain on the current page.

Example:

<button onclick="addBeforeunload()">Add onbeforeunload callback</button><br>
<a href="http://www.javascripture.com">Click to leave</a>
<script>
  var addBeforeunload = function() {
    window.onbeforeunload = function() {
      return 'Returned by onbeforeunload';
    };
  }
</script>

Results:

onblur / 'blur' event

listener(event : Event) : undefined

oncanplay / 'canplay' event

listener(event : Event) : undefined

oncanplaythrough / 'canplaythrough' event

listener(event : Event) : undefined

onchange / 'change' event

listener(event : Event) : undefined

onclick / 'click' event

listener(event : Event) : undefined

oncontextmenu / 'contextmenu' event

listener(event : Event) : undefined

oncopy / 'copy' event

listener(event : ClipboardEvent) : undefined

oncuechange / 'cuechange' event

listener(event : Event) : undefined

oncut / 'cut' event

listener(event : ClipboardEvent) : undefined

ondblclick / 'dblclick' event

listener(event : Event) : undefined

ondrag / 'drag' event

listener(event : Event) : undefined

ondragend / 'dragend' event

listener(event : Event) : undefined

ondragenter / 'dragenter' event

listener(event : Event) : undefined

ondragleave / 'dragleave' event

listener(event : Event) : undefined

ondragover / 'dragover' event

listener(event : Event) : undefined

ondragstart / 'dragstart' event

listener(event : Event) : undefined

ondrop / 'drop' event

listener(event : Event) : undefined

ondurationchange / 'durationchange' event

listener(event : Event) : undefined

onemptied / 'emptied' event

listener(event : Event) : undefined

onended / 'ended' event

listener(event : Event) : undefined

onerror / 'error' event

listener(message : string, source : String, line : Number, column : Number, error : Object) : undefined

Fired when an unhandled exception is thrown or an error is passed to reportError().

Example:

<script>
window.onerror = function(message, source, line, column, error) {
  console.log(message);
  console.log(source);
  console.log(line);
  console.log(column);
  console.log(error);
};

try {
  reportError(Error('reportedException'));
  console.log('');
  throw Error('handledException');
}
catch {}

throw Error('unhandledException');
</script>

Results:

onfocus / 'focus' event

listener(event : Event) : undefined

ongamepadconnected / 'gamepadconnected' event

listener(event : GamepadEvent) : undefined

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('gamepad connected', event.gamepad.id);
});
window.addEventListener('gamepaddisconnected', (event) => {
  console.log('gamepad disconnected', event.gamepad.id);
});
</script>

Results:

ongamepaddisconnected / 'gamepaddisconnected' event

listener(event : GamepadEvent) : undefined

Example:

Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('gamepad connected', event.gamepad.id);
});
window.addEventListener('gamepaddisconnected', (event) => {
  console.log('gamepad disconnected', event.gamepad.id);
});
</script>

Results:

onhashchange / 'hashchange' event

listener(event : HashChangeEvent) : undefined

Fired when the '#' portion of the url changes. See also location.hash.

Example:

<a id='foo' href='#bar'>Go to #bar</a>
<div style='height: 1000px'></div>
<a id='bar' href='#foo'>Go to #foo</a>

<script>
  window.onhashchange = function(event) {
    console.log('oldURL: ' + event.oldURL);
    console.log('newURL: ' + event.newURL);
  };
</script>

Results:

oninput / 'input' event

listener(event : Event) : undefined

oninvalid / 'invalid' event

listener(event : Event) : undefined

onkeydown / 'keydown' event

listener(event : Event) : undefined

onkeypress / 'keypress' event

listener(event : Event) : undefined

onkeyup / 'keyup' event

listener(event : Event) : undefined

onload / 'load' event

listener(event : Event) : undefined

onloadeddata / 'loadeddata' event

listener(event : Event) : undefined

onloadedmetadata / 'loadedmetadata' event

listener(event : Event) : undefined

onloadstart / 'loadstart' event

listener(event : Event) : undefined

onmessage / 'message' event

listener(event : Event) : undefined

Fired when postMessage() is called on this.

onmousedown / 'mousedown' event

listener(event : Event) : undefined

onmousemove / 'mousemove' event

listener(event : Event) : undefined

onmouseout / 'mouseout' event

listener(event : Event) : undefined

onmouseover / 'mouseover' event

listener(event : Event) : undefined

onmouseup / 'mouseup' event

listener(event : Event) : undefined

onmousewheel / 'mousewheel' event

listener(event : Event) : undefined

onoffline / 'offline' event

listener(event : Event) : undefined

ononline / 'online' event

listener(event : Event) : undefined

onpagehide / 'pagehide' event

listener(event : Event) : undefined

onpageshow / 'pageshow' event

listener(event : Event) : undefined

onpaste / 'paste' event

listener(event : ClipboardEvent) : undefined

onpause / 'pause' event

listener(event : Event) : undefined

onplay / 'play' event

listener(event : Event) : undefined

onplaying / 'playing' event

listener(event : Event) : undefined

onpopstate / 'popstate' event

listener(event : PopStateEvent) : undefined

Called when the page navigation changes. See also History.

onprogress / 'progress' event

listener(event : Event) : undefined

onratechange / 'ratechange' event

listener(event : Event) : undefined

onreset / 'reset' event

listener(event : Event) : undefined

onresize / 'resize' event

listener(event : Event) : undefined

onscroll / 'scroll' event

listener(event : Event) : undefined

onseeked / 'seeked' event

listener(event : Event) : undefined

onseeking / 'seeking' event

listener(event : Event) : undefined

onselect / 'select' event

listener(event : Event) : undefined

onshow / 'show' event

listener(event : Event) : undefined

onstalled / 'stalled' event

listener(event : Event) : undefined

onstorage / 'storage' event

listener(event : StorageEvent) : undefined

onsubmit / 'submit' event

listener(event : Event) : undefined

onsuspend / 'suspend' event

listener(event : Event) : undefined

ontimeupdate / 'timeupdate' event

listener(event : Event) : undefined

onunhandledrejection / 'unhandledrejection' event

listener(event : PromiseRejectionEvent) : undefined

Fired when a Promise's reject handler is called or an exception is thrown in an Promise executor function or in an async function.

Example:

<script>
  window.onunhandledrejection = function(event) {
    console.log('Unhandled rejection: ' + event.reason);
    event.preventDefault();
  };

  new Promise(function(resolve, reject) {
    reject('Promise reject');
  });

  new Promise(function(resolve, reject) {
    throw 'Promise throw';
  });

  (async function() {
    throw 'async function throw';
  })();
</script>

Results:

onunload / 'unload' event

listener(event : Event) : undefined

onvolumechange / 'volumechange' event

listener(event : Event) : undefined

home license contribute feedback toggle light/dark mode

Copyright © JavaScripture Contributors