时间戳

首页 > 解决方案 > 每个按钮的 iframe 全屏

javascript - 每个按钮的 iframe 全屏

问题描述

我想在我的网页中嵌入来自维基百科的出版物的一部分在一个框中（就像它在 iframe 代码中一样），如果用户真的感兴趣，他们可以单击全屏按钮以显示维基百科页面全屏，无需重定向，无需打开新窗口。

如果您可以改进和清洁代码，欢迎

图 1 = 显示嵌入页面

图 2 = 是压力全屏当前的作用

图 3 = 当我按下全屏按钮时，我实际上需要你做的事情

我的代码如下。

<! doctype html>
<html>

<head>
<script> function launchFullScreen (element) {
if (element.requestFullScreen) {
element.requestFullScreen ();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen ();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen ();
}
}
// Launch in full screen in browsers that support it
function cancelFullScreen () {
if (document.cancelFullScreen) {
document.cancelFullScreen ();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen ();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen ();
}
}
</script>
<button onclick = "launchFullScreen (document.documentElement);"> Enter full screen </button>
<button onclick = "cancelFullScreen ();"> Exit full screen </button>
</head>
<body>
<div>
<div class = "youtube-embed-wrapper" style = "position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden"> <iframe __idm_id __ = "137667585" allowfullscreen = "" frameborder = "0" height = "360" src = "https://es.wikipedia.org/wiki/Wikipedia:Portada" style = "position: absolute; top: 0; left: 0; width: 100% ; height: 100% "width =" 640 "> </iframe> </div>


<p> & nbsp; </p>
</div>

<p style = "text-align: justify;"> <span style = "font-size: 18px;"> <img alt = "" height = "450" ​​src = "/ courses / WEBINARFATRI / document / webinar -german -rodriguez-1.png "width =" 500 "/> </span> </p>
<style type = "text / css"> body {}
</style>
<style type = "text / css"> body {}
</style>
</body>
</html>

在此处输入图像描述

标签： javascripthtmliframe

解决方案

推荐阅读