douzhao7014 2015-09-22 11:27
浏览 41
已采纳

重定向页面[重复]时html中的全屏问题

This question already has an answer here:

When I am putting below code for full screen but when I redirect another page full screen is not working .how can do this when redirect full screen is not close.My full screen code is here.

    <script type="text/javascript">

        function toggleFullScreen() {
            if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }
    </script>

please help me.

</div>
  • 写回答

1条回答 默认 最新

  • doulai2573 2015-09-22 18:37
    关注

    [Extracted from my own answer to a similar question]:

    This issue happens because there are two different full screen modes:

    • One applied to elements/documents that you trigger using JavaScript (the one you are using with the API). This fullscreen is lost when the page reloads or when you browse to a different page.
    • Another native to the browser that is set by the user with F11 (applied to the browser itself, and not to the page/document: if you reload or browse to a different site, the browser will continue in fullscreen mode).

    [For your particular case]:

    You are using the Fullscreen API, so when you navigate to a different page the full screen is lost (because it applies to that particular document that is left behind).

    One possible solution would be to have an iframe that occupies the whole size of the screen, and apply the full screen to the document that contains it. That way, the user will move within the iframe that will be in a full-screen document.

    Something like this (you will need to copy this code into your own file as due to security reasons, frames are not allowed in the code snippets):

    function toggleFullScreen() {
      
      // hide the button
      document.getElementById("mybutton").style.display = "none";
      
      // your content
      if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
          document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }
    #mybutton { z-index:2; position:absolute; }
    iframe { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; }
    <button id="mybutton" onclick="toggleFullScreen()">Full Screen</button>
    <iframe src="http://stackoverflow.com"></iframe>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能