Question

我正在尝试使用Javascript激活全屏模式，但它无法正常工作。

请注意，该功能内的控制台日志（第4行和第11行）正在打印正确的值，但未显示全屏模式。

可能是什么问题？这是我的代码。

function fullscreen()
{
    var _element = document.getElementById('BookMainDiv');
    console.log(_element);
    if (_element.mozRequestFullScreen)
    {
        _element.mozRequestFullScreen();
    }
    else if(_element.webkitRequestFullScreen)
    {
        console.log("aaa");
       _element.webkitRequestFullScreen();  
    }
}

HTML

<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>

P.S。我在Windows 8上使用chrome 31

Answer 1

这应该有用..

 <html>
  <head>
    <script>
      function fullscreen()
      {
        var fullscrn = document.getElementById("BookMainDiv");
        req= fullscrn.requestFullScreen || fullscrn.webkitRequestFullScreen || fullscrn.mozRequestFullScreen;
        req.call(fullscrn);


      }
    </script>
  </head>
  <body>
    <div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
    </div>
    <input type="button" style="height:20%;width:20%" onclick="fullscreen()">
  </body>

</html>

P.S：您的代码在我的系统中正常运行（是的，浏览器本身就是chrome）

Answer 2

当开发者工具打开并且您在javascript中有断点时，requesFullScreen（webkitRequestFullScreen）在Chrome中无效！关闭它，你会发现它会起作用！

----------------------------- EDITED ----------------- -

请确保您的文件声明是这样的：

<!DOCTYPE html>

试试这段代码：

function FullScreen() {
    var element = document.getElementById("BookMainDiv");
    if (element.requestFullScreen) {
        element.requestFullScreen();
    }
    if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
}

如何激活全屏模式？

2 个答案: