怎样实现点击按钮后页面自动全屏显示_脚本调用REQUESTFULLSCREEN-html教程-PHP中文网

点击按钮触发requestfullscreen需在click事件中同步调用，目标优先选document.documentelement，必须.catch()处理promise拒绝，监听fullscreenchange事件响应状态，并确保iframe含allow="fullscreen"属性。

怎样实现点击按钮后页面自动全屏显示_脚本调用requestfullscreen

点击按钮触发 `requestFullscreen` 的基本写法

现代浏览器中，页面全屏必须由用户手势（比如 click）主动触发，不能在异步回调或定时器里调用 requestFullscreen，否则会直接拒绝并抛出 TypeError: Document not active 或静默失败。

正确做法是把全屏逻辑直接绑在按钮的 onclick 或 addEventListener('click', ...) 里，并确保调用目标是合法元素（通常是 document.documentElement 或某个容器节点）：

button.addEventListener('click', () => {
  document.documentElement.requestFullscreen()
    .catch(err => console.error('全屏请求被拒绝：', err));
});

注意：requestFullscreen 返回 Promise，必须处理 reject 情况——常见原因包括：页面不在前台、iframe 未设置 allow="fullscreen"、或用户禁用了全屏权限。

为什么 `document.body.requestFullscreen()` 常失败

很多初学者习惯对 body 调用全屏，但实际兼容性差。Chrome 和 Firefox 都更倾向接受 document.documentElement（即根节点），而 body 在部分版本中会直接报 NotFoundError。

document.documentElement 是最稳妥的选择，覆盖所有主流浏览器
若想全屏某个区域（如视频播放器），应传入该 <div> 元素，但它必须是 DOM 中已挂载的节点，且不能是 <code>display: none 或 visibility: hidden
某些移动端浏览器（如 iOS Safari）完全不支持非 <video></video> 元素的全屏，此时调用会静默忽略

全屏状态监听与退出控制必须配对使用

仅调用 requestFullscreen 不够，用户可能按 ESC 退出，或系统强制退出（如弹出系统通知）。必须监听 fullscreenchange 事件来同步 UI 状态，比如切换按钮文字：

html5全屏可拖拽的横向图片布局

html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。

下载

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    // 进入全屏
    button.textContent = '退出全屏';
  } else {
    // 退出全屏
    button.textContent = '全屏显示';
  }
});

// 主动退出用 document.exitFullscreen()
button.addEventListener('click', () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
});

注意：document.exitFullscreen() 也返回 Promise，同样需要 catch；且它只能在已有全屏元素时生效，否则会 reject。