html如何全屏显示_html5调用浏览器全屏api教程-html教程-PHP中文网

element.requestfullscreen() 必须由用户手势（如click）同步触发，禁止在onload、settimeout或异步回调中调用；iframe需添加allow="fullscreen"；整页全屏用document.documentelement.requestfullscreen()；退出时监听fullscreenchange并用dvh单位防布局跳变。

html如何全屏显示_html5调用浏览器全屏api教程

Element.requestFullscreen() 调用失败的常见原因

直接调用 element.requestFullscreen() 报错 “Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture”，说明触发时机不合法。浏览器强制要求全屏必须由用户显式交互（如 click、keydown）发起，不能在 onload、setTimeout 或 Promise.then 里调用。

确保绑定在 click 或 pointerdown 事件回调中，且该回调是同步执行的（不要包在异步逻辑里）
避免在 Vue 的 @click.native 或 React 的合成事件里做防抖/节流后调用，可能切断用户手势链
如果目标元素是 iframe，需检查其 allow="fullscreen" 属性是否已添加（否则 Chrome 会静默拒绝）

如何让整个页面（而非单个元素）进入全屏

HTML5 全屏 API 没有“全屏页面”这个独立接口，但可通过 document.documentElement 触发，效果等同于按 F11 —— 整个浏览器标签页内容区域铺满屏幕（不含地址栏、书签栏等 UI）。

function enterFullScreen() {
  if (document.fullscreenElement) return;
  const el = document.documentElement;
  if (el.requestFullscreen) {
    el.requestFullscreen();
  }
}

注意：Safari 15.4+ 才支持 document.documentElement.requestFullscreen()；旧版 Safari 需用 document.webkitEnterFullscreen()，但它仅对 <video></video> 有效，对普通页面无效 —— 所以别试。

退出全屏后状态丢失或样式错乱怎么办

退出全屏时，fullscreenchange 事件会触发，但此时 document.fullscreenElement 已为 null，CSS 伪类 :fullscreen 也已失效。若依赖全屏状态切换 class 或重置尺寸，容易漏掉清理逻辑。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

监听 document.addEventListener('fullscreenchange', handler)，并在 handler 中统一处理进入/退出逻辑
避免只靠 :fullscreen 控制关键布局（如 height: 100vh），因为退出后 vh 单位会因地址栏显示而跳变；建议用 min-height: 100dvh（dvh 是动态视口单位，更稳定）
移动端 Safari 退出全屏后可能残留黑边，需手动触发 window.scrollTo(0, 0) 并延迟重设 body 高度

兼容性与降级建议（别只写 requestFullscreen）

Firefox/Chrome/Edge 基本支持标准 API，但旧版本仍需前缀。不过现在没必要手写全部前缀，只需覆盖主流场景：

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

重点：Safari 的 webkitRequestFullscreen 接收一个可选参数，传 Element.ALLOW_KEYBOARD_INPUT 才能在全屏下响应键盘输入（比如播放器控制）；不传则键盘事件被拦截 —— 这个细节常被忽略，导致全屏后快捷键失灵。

真要兜底，就老老实实提示用户按 F11，别硬扛不支持的环境。