iframe/元素/浏览器全屏之完美解决
外面的 html 文件 index.html：
<html lang="en">
<head>
<meta charset="utf-8">
<title>fullScreentitle>
<style>
body {
margin: 0;
}
style>
head>
<body>
<iframe id="fullScreen" allowfullscreen src="iframe.html" frameborder="0" style="width: 500px;height: 500px;background:#aaa"> iframe> ">全屏
body>
html>里面嵌套的 iframe.html 文件：
<html lang="en">
<head>
<meta charset="utf-8">
head>
<body>
<h1>iframeh1>
<button id="button">全屏button>
<script>
//全屏按钮上调用的方法 function showFullScreen(){ var elm = documet.getElementById("fullScreen");
launchFullscreen(elm ); }
// 全屏，退出按esc或参考参考参考注释代码写退出全屏按钮
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();//ie浏览器
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();//谷歌浏览器
}
}
// 监听全屏事件webkitfullscreenchange是谷歌内核的事件；MSFullscreenChange是ie内核的事件
document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen'); //可以在这里做一些全屏时的事
} else {
console.log('exit fullscreen'); //可以在这里做一些退出全屏时的事
}
}, false);
/****************退出全屏以下为注释代码***********************************************/ 此处内容仅供参考 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if ( document.msExitFullscreen){ document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } var btn = document.querySelector('#button'); if (fullscreenEnabled) { btn.addEventListener('click', function () { var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; if (fullscreenElement) { exitFullscreen(); btn.innerHTML = '全屏'; } else { launchFullscreen(document.documentElement); btn.innerHTML = '退出全屏'; } }, false); }/******************************退出按钮注释结束*********************************************/