firefox浏览器拒绝全屏更改 [英] firefox Browser rejected fullscreen change

问题描述

当我们点击它时，我正试图全屏显示我的网站元素，它适用于chrome，IE，但不适用于firefox。

I'm trying to make a element of my website in fullscreen when we click on it, and it works with chrome, IE, but not with firefox.

我去了 microsoft fullscreen API ，我测试了代码，这些浏览器都没有问题。

I went to the microsoft fullscreen API, and I tested theire code, and there is no problems with any of this browsers.

这里是我想要全屏放入我网站的部分。

Here the part of my web site I want to put in full screen.

<div class="wrap">
    <div class="signin">
        <div style="margin: 2px 0px -25px 10px;"><h1>Sign In or <a href="<?php echo $this->url(array('module' => 'default','controller'=>'paid-sign-up','action'=>'index'),null,true); ?>" style="color:#F00;text-decoration:none;">Signup</a></h1></div>
        <?php echo $this->signin(); ?>
        <span class="forget">
        <a href="<?php echo $this->url(array('module' => 'default','controller'=>'forgot-password','action'=>'index'),null,true); ?>">Forgotten Password?</a> </span>
    </div>

这里是我使用的脚本

    <script type="text/javascript">
  var inFullScreen = false; // flag to show when full screen

  var fsClass = document.getElementsByClassName("wrap");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target); // open to full screen
      } else {
        reset();
      }
    }, false);
  }


  function makeFullScreen(divObj) {
alert (divObj);
  if (divObj.requestFullscreen) {
alert ('standard');
        divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
alert ('ms');
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
alert ('moz');
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
alert ('webkit');
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }

  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }


</script>

最后一个有用的信息，我的网站是一个zent框架网站，这就是为什么有一些PHP。

And the last info who can be usefull, my website is a zent framework website, it's why there is some PHP.

推荐答案

此代码段适用于大多数浏览器。火狐浏览器。具体来说，Mozilla Firefox坚持认为事件处理程序中的代码执行时间不到1秒。否则全屏请求被拒绝。参考：错误报告

This code segment should work for most browsers incl. Mozilla Firefox. Specifically, Mozilla Firefox insists that the code in the event handler executes under 1 second. Else Fullscreen requests are denied. Refer: Bug Report

HTML

<button id="view-fullscreen">Fullscreen</button>

Javascript

Javascript

var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
  viewFullScreen.addEventListener("click", function() {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    } else if (docElm.msRequestFullscreen) {
      docElm.msRequestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen();
    }
  })
}

详情请参阅FullScreen API
全屏API

Refer to the FullScreen API for more details Fullscreen API

以上代码段的工作演示：全屏演示

The above code segment's working Demo: Fullscreen Demo

这篇关于firefox浏览器拒绝全屏更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！