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

栏目: Html · 发布时间: 7年前

内容简介:问题:页面中使用iframe嵌入PDF.js的viewer.html时,部分浏览器全屏功能错误;问题详情:问题出现的浏览器主要有:edge(win10自带),火狐(按钮被屏蔽);解决方案:

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

问题详情:问题出现的浏览器主要有:edge(win10自带),火狐(按钮被屏蔽);

解决方案:

1.不使用iframe,新标签页打开;- 放弃:页面体验不好;

2.不使用iframe,使用模板布局,嵌套页面;- 放弃:模板与PDF.js样式冲突较多,适配后高耦合,不灵活;

3.继续使用iframe,保持原平台风格,重写PDF.js的全屏按钮操作;- 最终方案:快捷有效,低耦合;

全屏代码:

<a href="#" onClick="fullscreenAction()">button</a>
<p id="state" style="display:none;">no</p>

  //动作
  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);
  }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hit Refresh

Hit Refresh

Satya Nadella、Greg Shaw / HarperBusiness / 2017-9-26 / USD 20.37

Hit Refresh is about individual change, about the transformation happening inside of Microsoft and the technology that will soon impact all of our lives—the arrival of the most exciting and disruptive......一起来看看 《Hit Refresh》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器