JavaScript 参考手册

JavaScript 对象: JavaScript Console 对象; JavaScript 正则表达式(RegExp) 对象; JavaScript Number 对象; JavaScript String 对象; JavaScript Array 对象; JavaScript Boolean 对象; JavaScript Math 对象; JavaScript CSS 样式声明对象; JavaScript Math.SQRT2 属性; JavaScript 数组 from() 方法; JavaScript 数组 includes() 方法; JavaScript Math.SQRT1_2 属性; HTML DOM console.time() 方法; HTML DOM console.timeEnd() 方法; HTML DOM console.trace() 方法; HTML DOM console.table() 方法; HTML DOM console.groupCollapsed() 方法; HTML DOM console.info() 方法; HTML DOM console.assert() 方法; HTML DOM console.warn() 方法; JavaScript RegExp toString() 方法; HTML DOM console.groupEnd() 方法; JavaScript RegExp multiline 属性; JavaScript RegExp lastIndex 属性; HTML DOM console.count() 方法; JavaScript RegExp ignoreCase 属性; JavaScript RegExp global 属性; JavaScript RegExp constructor 属性; HTML DOM console.error() 方法; JavaScript isSafeInteger() 方法; JavaScript Number isNaN() 方法; JavaScript isInteger() 方法; JavaScript Number isFinite() 方法; HTML DOM console.group() 方法; JavaScript Number prototype 属性; JavaScript MAX_SAFE_INTEGER 属性; JavaScript MIN_SAFE_INTEGER 属性; JavaScript String valueOf() 方法; JavaScript Number constructor 属性; HTML DOM console.clear() 方法; JavaScript String repeat() 方法; JavaScript String localeCompare() 方法; JavaScript String startsWith() 方法; JavaScript String includes() 方法; JavaScript RegExp source 属性; JavaScript toLocaleLowerCase() 方法; JavaScript 数组 valueOf() 方法; JavaScript String endsWith() 方法; JavaScript String prototype 属性; JavaScript String constructor 属性; JavaScript 数组 some() 方法; JavaScript String toString() 方法; JavaScript String fromCharCode() 方法; JavaScript 数组 keys() 方法; JavaScript toLocaleUpperCase() 方法; JavaScript 数组 entries() 方法; JavaScript 数组 prototype 属性; JavaScript 布尔 valueOf() 方法; JavaScript 布尔 prototype 属性; JavaScript Math.trunc() 方法; JavaScript 数组 reduceRight() 方法; JavaScript 布尔 toString() 方法; JavaScript 数组 constructor 属性; JavaScript Math.tan() 方法; JavaScript Math.sinh() 方法; JavaScript Math.log() 方法; JavaScript 数组 copyWithin() 方法; JavaScript Math.cosh() 方法; JavaScript 布尔 constructor 属性; JavaScript Math.atanh() 方法; JavaScript Math.asinh() 方法; JavaScript Math.tanh() 方法; JavaScript Math.asin() 方法; JavaScript Math.LOG2E 属性; JavaScript Math.cbrt() 方法; JavaScript Math.exp() 方法; JavaScript Math.LN2 属性; JavaScript Math.LN10 属性; JavaScript Math.atan() 方法; JavaScript Math.E 属性; CSSStyleDeclaration setProperty() 方法; JavaScript Math.atan2() 方法; CSSStyleDeclaration item() 方法; JavaScript Math.acosh() 方法; CSSStyleDeclaration getPropertyValue() 方法; CSSStyleDeclaration length 属性; JavaScript Math.LOG10E 属性; CSSStyleDeclaration cssText 属性; JavaScript Math.acos() 方法; CSSStyleDeclaration removeProperty() 方法; CSSStyleDeclaration getPropertyPriority() 方法; CSSStyleDeclaration parentRule 属性; Window getComputedStyle() 方法

JavaScript 参考手册: JavaScript 全局属性/函数; JavaScript Error 参考手册; JavaScript 语句和声明; JavaScript NaN 属性; JavaScript isFinite() 函数; JavaScript encodeURIComponent() 函数; JavaScript encodeURI() 函数; JavaScript decodeURI() 函数; JavaScript Infinity 属性; JavaScript decodeURIComponent() 函数

JS DOM参考手册: HTML DOM Style 对象; JS Storage 对象; JavaScript Window 对象; Event Objects(事件对象); JavaScript Navigator 对象; JavaScript Location 对象; JS DOM HTMLCollection 对象; HTML DOM Document 对象; JavaScript History 对象; HTML DOM Element 对象; JavaScript Screen 对象; HTML DOM Events; HTML DOM Attribute 对象; HTML DOM firstChild 属性; HTML DOM scrollHeight 属性; HTML DOM doctype 属性; HTML DOM designMode 属性; HTML DOM defaultView 属性; HTML DOM createDocumentFragment() 方法; Location search 属性; HTML DOM createComment() 方法; Window outerHeight 属性; Window resizeTo() 方法; HTML DOM createAttribute() 方法; Window resizeBy() 方法; Window name 属性; Window opener 属性; CSS 属性大全手册（按功能）; Storage clear() 方法; Storage removeItem() 方法; Storage setItem() 方法; Storage getItem() 方法; Storage key() 方法; Window stop() 方法; Window setInterval() 方法; Window scrollBy() 方法; Window scrollTo() 方法; Window prompt() 方法; Window print() 方法; Window open() 方法; Window setTimeout() 方法; Window matchMedia() 方法; Window moveTo() 方法; Window moveBy() 方法; Storage length 属性; Window confirm() 方法; Window close() 方法; Window clearTimeout() 方法; Window requestAnimationFrame() 方法; Window btoa() 方法; Window getSelection() 方法; Window atob() 方法; Window top 属性; Window blur() 方法; Window sessionStorage 属性; Window scrollY 属性; Window focus() 方法; Window screenY 属性; Window screenX 属性; Window scrollX 属性; Window clearInterval() 方法; Window screenTop 属性; Window self 属性; Window parent 属性; Window pageXOffset 属性; Window localStorage 属性; Window screenLeft 属性; Window length 属性; Window innerHeight 属性; Window outerWidth 属性; Window pageYOffset 属性; Window innerWidth 属性; Navigator platform 属性; Navigator javaEnabled() 方法; Window closed 属性; Navigator userAgent 属性; Window frameElement 属性; Navigator geolocation 属性; Navigator onLine 属性; Navigator language 属性; Navigator product 属性; Navigator appVersion 属性; Navigator appName 属性; Location replace() 方法; Navigator appCodeName 属性; Location assign() 方法; Location protocol 属性; Location origin 属性; Location port 属性; Location pathname 属性; Window frames 属性; Navigator cookieEnabled 属性; HTML DOM removeEventListener() 方法; Location href 属性; Location hostname 属性; Location hash 属性; HTML DOM writeln() 方法; Location host 属性; HTML DOM querySelectorAll() 方法; Location reload() 方法; HTML DOM getElementsByTagName() 方法; HTML DOM querySelector() 方法; HTML DOM importNode() 方法; HTML DOM getElementsByName() 方法; HTML DOM getElementsByClassName() 方法; HTML DOM exitFullscreen() 方法; HTML DOM execCommand() 方法; HTML DOM createTextNode() 方法; HTML DOM createElement() 方法; HTML DOM close() 方法; HTML DOM adoptNode() 方法; HTML DOM addEventListener() 方法; HTML DOM hasFocus() 方法; HTML DOM open() 方法; HTML DOM scripts 属性; HTML DOM title 属性; HTML DOM readyState 属性; HTML DOM lastModified 属性; HTML DOM URL 属性; HTML DOM head 属性; HTML DOM implementation 属性; HTML DOM images 属性; HTML DOM fullscreenEnabled 属性; HTML DOM links 属性; HTML DOM forms 属性; HTML DOM fullscreenElement 属性; HTML DOM domain 属性; HTML DOM embeds 属性; HTML DOM documentURI 属性; HTML DOM referrer 属性; HTML DOM documentElement 属性; HTML DOM characterSet 属性; HTML DOM body 属性; HTML DOM activeElement 属性; HTML DOM baseURI 属性; JavaScript History go() 方法; JavaScript History forward() 方法; JavaScript History length 属性; HTML DOM setAttribute() 方法; HTML DOM setAttributeNode() 方法; JavaScript History back() 方法; HTML DOM cookie 属性; HTML DOM scrollIntoView() 方法; HTML DOM requestFullscreen() 方法; HTML DOM replaceChild() 方法; HTML DOM removeChild() 方法; HTML DOM isEqualNode() 方法; HTML DOM insertBefore() 方法; HTML DOM removeAttribute() 方法; HTML DOM insertAdjacentHTML() 方法; HTML DOM hasChildNodes() 方法; HTML DOM hasAttribute() 方法; HTML DOM hasAttributes() 方法; HTML DOM removeAttributeNode() 方法; HTML DOM isSameNode() 方法; HTML DOM getElementsByTagName() 方法; HTML DOM getAttributeNode() 方法; HTML DOM getAttribute() 方法; HTML DOM insertAdjacentText() 方法; HTML DOM isDefaultNamespace() 方法; HTML DOM click() 方法; HTML DOM cloneNode() 方法; HTML DOM insertAdjacentElement() 方法; HTML DOM appendChild() 方法; HTML DOM title 属性; HTML DOM textContent 属性; HTML DOM getElementsByClassName() 方法; HTML DOM tagName 属性; HTML DOM scrollWidth 属性; HTML DOM getBoundingClientRect() 方法; HTML DOM scrollTop 属性; HTML DOM contains() 方法; HTML DOM scrollLeft 属性; HTML DOM previousElementSibling 属性; HTML DOM focus() 方法; HTML DOM parentNode 属性; HTML DOM parentElement 属性; HTML DOM compareDocumentPosition() 方法; HTML DOM offsetLeft 属性; HTML DOM offsetHeight 属性; HTML DOM offsetWidth 属性; HTML DOM blur() 方法; HTML DOM nodeValue 属性; HTML DOM nodeType 属性; HTML DOM previousSibling 属性; HTML DOM nextElementSibling 属性; HTML DOM nodeName 属性; HTML DOM lastElementChild 属性; HTML DOM nextSibling 属性; HTML DOM namespaceURI 属性; HTML DOM offsetTop 属性; HTML DOM lastChild 属性; HTML DOM offsetParent 属性; HTML DOM isContentEditable 属性; HTML DOM innerText 属性; HTML DOM clientWidth 属性; HTML DOM firstElementChild 属性; HTML DOM clientTop 属性; HTML DOM clientHeight 属性; HTML DOM className 属性; HTML DOM classList 属性; HTML DOM childNodes 属性; HTML DOM attributes 属性; HTML DOM childElementCount 属性; HTML DOM children 属性; Screen width 属性; HTML DOM contentEditable 属性; Screen pixelDepth 属性; Screen height 属性; HTML DOM clientLeft 属性; Screen availWidth 属性; HTML DOM id 属性; HTML DOM accessKey 属性; Screen colorDepth 属性; Screen availHeight 属性

当前位置：首页 JavaScript JavaScript 参考手册 JS DOM参考手册

HTML DOM requestFullscreen() 方法

发布时间：2016-03-02 修改时间：2023-02-24 由网友大卫发布阅读 33

HTML DOM requestFullscreen() 方法

HTML DOM Element 对象

requestFullscreen()方法用来在全屏模式下打开一个元素。

此方法需要特定的前缀才能在不同的浏览器中工作（请参考下面的浏览器兼容性）。

使用document.exitFullscreen()方法取消全屏模式。

语法：

HTMLElement.requestFullscreen()

示例

/* 获取(<html>)元素以全屏显示页面 */
var elem = document.documentElement;

/* 全屏查看 */
function openFullscreen() {
  if (elem.requestFullscreen) {
     elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {/* Firefox */
     elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
     elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
  }
}

测试看看‹/›

浏览器兼容性

表格中的数字指定了完全支持该方法的第一个浏览器版本。每个浏览器都需要一个特定的供应商前缀：

Method
requestFullscreen()	15.0（Webkit）	9.0（moz）	12.10（Webkit）	5.1（Webkit）	11.0（ms）

技术细节

返回值：	没有

更多实例

以全屏模式显示<video>元素：

示例

/* 获取(<video>)元素 */
var elem = document.getElementsByTagName("video")[0];

/* 全屏查看 */
function openFullscreen() {
  if (elem.requestFullscreen) {
     elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {/* Firefox */
     elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
     elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
  }
}

测试看看‹/›

当页面处于全屏模式时，可以使用CSS设置页面样式：

示例

div:-moz-full-screen {
   background-color: pink;
}

div:-webkit-full-screen {
   background-color: pink;
}

div:fullscreen {
   background-color: pink;
}

测试看看‹/›

相关参考

HTML DOM参考：document.exitFullscreen()方法

HTML DOM参考：document.fullscreenElement属性

HTML DOM参考：document.fullscreenEnabled属性

HTML DOM Element 对象

HTML DOM scrollIntoView() 方法 HTML DOM replaceChild() 方法