JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误

Jiavan 发布于2019-08-26 13:46 / 2083人阅读

摘要：问题页面中使用嵌入的时，部分浏览器全屏功能错误问题详情问题出现的浏览器主要有自带，火狐按钮被屏蔽解决方案不使用，新标签页打开放弃页面体验不好不使用，使用模板布局，嵌套页面放弃模板与样式冲突较多，适配后高耦合，不灵活继续使用，保持原平台风

问题：页面中使用iframe嵌入PDF.js的viewer.html时，部分浏览器全屏功能错误；

问题详情：问题出现的浏览器主要有：edge（win10自带），火狐（按钮被屏蔽）；

解决方案：
1.不使用iframe，新标签页打开；- 放弃：页面体验不好；
2.不使用iframe，使用模板布局，嵌套页面；- 放弃：模板与PDF.js样式冲突较多，适配后高耦合，不灵活；
3.继续使用iframe，保持原平台风格，重写PDF.js的全屏按钮操作；- 最终方案：快捷有效，低耦合；

全屏代码：

button
no

  //动作
  function fullscreenAction() {
      var state = document.getElementById("state").innerText;
      if (state == "no") {
          fullscreen();
      } else {
          exitFullscreen();
      }
  }
  
  //全屏
  function fullscreen() {
      var docElm = document.documentElement;
      if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
      } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
      }
  }

  // 退出全屏
  function exitFullscreen() {
      if (document.exitFullscreen) {
          document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
      }
  }

  // 监听是否全屏
  window.onload = function() {
      var elem = document.getElementById("state");
      document.addEventListener("fullscreenchange",
          function() {
              elem.innerText = document.fullscreen ? "yes": "no";
          },
          false);
      document.addEventListener("mozfullscreenchange",
          function() {
              elem.innerText = document.mozFullScreen ? "yes": "no";
          },
          false);
      document.addEventListener("webkitfullscreenchange",
          function() {
              elem.innerText = document.webkitIsFullScreen ? "yes": "no";
          },
          false);
      document.addEventListener("msfullscreenchange",
          function() {
              elem.innerText = document.msFullscreenElement ? "yes": "no";
          },
          false);
  }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109492.html

Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

zsirfs 2019-08-19 18:35 评论0 收藏0
Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

wangxinarhat 2019-08-01 15:22 评论0 收藏0
Fullscreen API 全屏显示网页

摘要：进入全屏将全屏显示。内核浏览器和表现不同，前者只要求是元素即可，后者则要求必须是文档流中的元素，比较严格，否则不能全屏显示。内核浏览器会阻止除方向键控制键之外的键盘输入，会在输入时发出要求用户退出全屏状态的提示。第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireF...

TNFE 2019-08-30 13:07 评论0 收藏0