Question

当我在全屏下面放置代码时，但是当我重定向另一个页面时，全屏幕无效。当重定向全屏不关闭时，可以这样做。我的全屏代码就在这里。

json format

请帮帮我。

Answer 1

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

出现此问题是因为有两种不同的全屏模式：

One applied to elements/documents。当页面重新加载或浏览到其他页面时，此全屏丢失。
用户使用F11设置的另一个原生浏览器（应用于浏览器本身，而不是页面/文档：如果您重新加载或浏览到其他站点，浏览器将继续以全屏模式运行）。

[针对您的具体情况] ：

您正在使用Fullscreen API，因此当您导航到其他页面时，全屏会丢失（因为它适用于留下的特定文档）。

一种可能的解决方案是使iframe占据整个屏幕大小，并将全屏应用于包含它的文档。这样，用户将移动到全屏文档中的iframe。

这样的事情（由于安全原因，您需要将此代码复制到您自己的文件中，代码段中不允许使用框架）：

＆＃13;

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();
    }
  }
}

＆＃13;

#mybutton { z-index:2; position:absolute; }
iframe { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; }

＆＃13;

<button id="mybutton" onclick="toggleFullScreen()">Full Screen</button>
<iframe src="http://stackoverflow.com"></iframe>

＆＃13;

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

1 个答案: