PUBLIC

JavaScript 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).

Spec

Instance Properties

applicationCache : ApplicationCache readonly

crypto : Crypto

Spec

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>

Run

Results:

Spec

document : Document readonly

Returns the document for this window.

Example:

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

Run

Results:

Spec

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>

Run

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>

Run

Results:

Spec

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);

Run

Results:

Spec

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);

Run

Results:

Spec

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>

Run

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>

Run

Results:

Spec

name : String

Spec

navigator : Navigator

opener : Window

outerHeight : Number readonly

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

Example:

console.log(window.outerHeight);

Run

Results:

Spec

outerWidth : Number readonly

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

Example:

console.log(window.outerWidth);

Run

Results:

Spec

pageXOffset : Number readonly

Spec

pageYOffset : Number readonly

Spec

parent : Window readonly

screen : Screen readonly

Spec

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);

Run

Results:

Spec

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);

Run

Results:

Spec

scrollX : Number readonly

Spec

scrollY : Number readonly

Spec

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>

Run

Results:

Spec

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>

Run

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>

Run

Results:

Spec

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>

Run

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

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>

Run

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>

Run

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>

Run

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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:

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

Results:

Spec

matchMedia(query : String) : MediaQueryList

Spec

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>

Run

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 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>

Run

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>

Run

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>

Run

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>

Run

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>

Run

Results:

Spec

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

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

Spec

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

stop() : undefined

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="">Click to leave</a>
<script>
  var addBeforeunload = function() {
    window.onbeforeunload = function() {
      return 'Returned by onbeforeunload';
    };
  }
</script>

Run

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

Spec

oncuechange / 'cuechange' event

listener(event : Event) : undefined

oncut / 'cut' event

listener(event : ClipboardEvent) : undefined

Spec

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(event : Event, source : String, line : Number, column : Number) : undefined

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>

Run

Results:

Spec

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>

Run

Results:

Spec

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>

Run

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

Spec

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.

Spec

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>

Run

Results:

onunload / 'unload' event

listener(event : Event) : undefined

onvolumechange / 'volumechange' event

listener(event : Event) : undefined

home license contribute feedback

Copyright © PUBLIC Contributors