调用requestFullscreen打开链接全屏仅黑屏，问题排查求助

我尝试实现点击按钮打开链接全屏的功能，参考requestFullscreen示例编写了如下代码，执行后仅出现黑屏窗口，请问问题出在哪里？

原代码 #

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button onclick="openFullscreen();">Open Link in Fullscreen Mode</button>

<a href="https://www.yahoo.com" id="mypagelink"></a>

</body>
</html>

<script>
var elem = document.getElementById("mypagelink");

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

问题原因 #

你当前的代码存在两个核心问题：

• 目标元素是空的<a>标签，它本身没有任何可视化内容，调用全屏API后自然显示黑屏
• <a>标签仅作为链接跳转的标记，不会自动加载并展示目标URL的页面内容

解决方法 #

改用<iframe>加载目标页面，再对这个<iframe>调用全屏API，修改后的代码如下：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  iframe {
    width: 100%;
    height: 100vh;
    border: none;
  }
</style>
</head>
<body>

<button onclick="openFullscreen();">Open Link in Fullscreen Mode</button>

<iframe src="https://www.yahoo.com" id="targetFrame"></iframe>

</body>
</html>

<script>
var elem = document.getElementById("targetFrame");

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

说明 #

• 用<iframe>替代<a>标签，通过src属性直接加载目标页面
• 给<iframe>设置样式，确保它默认占满视口空间，全屏时能铺满整个屏幕
• 保留原有的全屏兼容逻辑，对<iframe>元素执行全屏请求

内容的提问来源于stack exchange，提问作者Toshi W