时间戳

首页 > 解决方案 > 在全屏中禁用 iframe 重新加载

javascript - 在全屏中禁用 iframe 重新加载

问题描述

我有以下代码，通过单击按钮使 IFRAME 转到全屏，

var button = document.querySelector('#container .button');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener. 
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
  console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);

function fullscreen() {
  // check if fullscreen mode is available
  if (document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled) {
    
    // which element will be fullscreen
    var iframe = document.querySelector('#container iframe');
    // Do fullscreen
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    } else if (iframe.webkitRequestFullscreen) {
      iframe.webkitRequestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }
  }
  else {
    document.querySelector('.error').innerHTML = 'Your browser is not supported';
  }
}

function fullscreenChange() {
  if (document.fullscreenEnabled ||
       document.webkitIsFullScreen || 
       document.mozFullScreen ||
       document.msFullscreenElement) {
    console.log('enter fullscreen');
  }
  else {
    console.log('exit fullscreen');
  }
}
<div id="container">
  <div class="top-left">
    <button class="button">Ver Ecrã Completo</button>
  </div>

      <iframe src="http://google.pt" Title="google" frameborder="0"></iframe>
  <div class="error"></div>
</div>

当我进入全屏模式时，我假装禁用刷新/重新加载，反之亦然，我是如何错过的以及如何做到这一点？

ps：我已经添加了谷歌作为例子。注意：要添加为 SWF 和 JavaScript 的 iframe。

标签： javascriptiframe

解决方案

解决了！

我忘记删除主代码上的以下代码：

var iframe = document.querySelector('iframe'); iframe.src = iframe.src;

推荐阅读