在iframe中嵌入HTML5游戏，可以在不同的域名上切换到全屏模式
在iframe中嵌入HTML5游戏，可以在不同的域名上切换到全屏模式
提问于 2019-10-31 05:15:57
我正在尝试启用对从archive.org嵌入的游戏的全屏支持。
嵌入代码的示例如下：
<iframe src="https://archive.org/embed/DukeNukem" width="560" height="384" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>archive.org游戏页面本身提供全屏模式-查看实际的游戏页面和全屏按钮(右上角)：
https://archive.org/details/DukeNukem
我想要的是从远程网站切换嵌入式iframe和游戏画布到全屏模式的能力。
我已经尝试了各种Javascript，并能够使iframe进入全屏模式，但游戏画布本身与我尝试过的每个js实现保持相同的大小，导致带有小游戏视口和大量黑色空间的大型全屏iframe。如果可能的话，我希望实际的游戏画布调整大小类似于archive.org上全屏按钮的工作方式。
我希望找到一种创造性的方法，能够使用嵌入式html5 iframe游戏在不同的域上启用全屏模式。
我认为使用Adobe Flash可能是可能的，但如果可能的话，我更愿意避免使用Flash，因为对Flash的支持正在逐渐淡出。我的另一个想法是通过按下按钮将用户浏览器缩放到原始游戏画布大小，使用户处于准全屏模式。由于这个游戏的分辨率很低，我不认为它会导致太多的图形质量损失。只是不确定代码的实际可能的缩放，准全屏模式，以动态调整用户屏幕的大小和中心的iframe /游戏画布。当然还有更好的办法，你可以想一想在嵌入上启用全屏模式，我很想听听你的创意想法！
提前感谢您的帮助-非常感谢！如果没有别的，如果你还记得Duke Nukem，我的问题会让你体验到一点怀旧！！
回答 1
Stack Overflow用户
发布于 2020-01-09 03:40:03
//try this peace of code
//do not forget to change the src in the iframe tag
<html>
<head>
<title>full screen iframe</title>
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe src="" frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58633755
复制相关文章
相似问题
腾讯云开发者
