如何激活全屏模式

How to activate full screen mode?

本文关键字：模式 激活 何激活      更新时间：2024-06-04

我正在尝试使用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

这应该有效。。

 <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）

当开发工具打开时，requesFullScreen（webkitRequestFullScreen）在Chrome中不起作用，并且javascript中存在断点！关上它，你会看到它会工作！

-----------------------------编辑------------------

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

<!DOCTYPE html>

试试这个代码：

function FullScreen() {
    var element = document.getElementById("BookMainDiv");
    if (element.requestFullScreen) {
        element.requestFullScreen();
    }
    if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
}
相关文章：