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

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

内容简介:问题:页面中使用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);
  }

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

查看所有标签

猜你喜欢:

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

High Performance JavaScript

High Performance JavaScript

Nicholas C. Zakas / O'Reilly Media / 2010-4-2 / USD 34.99

If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all of those lines of JavaScript code can slow down your ......一起来看看 《High Performance JavaScript》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换