demo主要功能
- js实现全屏功能
注意：默认全屏会有黑色背景，需要css处理 - 主体中点击F11触发iframe全屏
- iframe中点击按钮触发主体全屏
- iframe内点击F11实现全屏功能
注意：鼠标需要在iframe内才能触发 - iframe内点击按钮触发iframe全屏
- 监听iframe的resize事件
[测试环境chrome]
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
<script src="./test.js"></script>
</head>
<body id="main">
<p>主体</p>
<button id="mainBtn">全屏</button>
<iframe id="first-iframe" name="first-iframe" class="first-iframe" src="iframe.html" scrolling="no" frameborder="0"></iframe>
<script>
var doc = window.document;
var btn = document.getElementById('mainBtn');
initEvent(doc,btn);
// F11触发iframe全屏
var iframe = document.getElementById("first-iframe");
F11(doc,iframe)
</script>
</body>
</html>
iframe.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
<script src="./test.js"></script>
</head>
<body id="second">
<p>第一级iframe内容</p>
<div>
触发主体全屏:
<button id="handleMainBtn">全屏</button>
</div>
<div>
触发iframe全屏:
<button id="firsrBtn">全屏</button>
</div>
</body>
<script>
// iframe内触发主体全屏
var btn = document.getElementById('handleMainBtn');
initEvent(window.top.document, btn);
// 触发iframe全屏
var iframe = window.top.document.getElementById("first-iframe");
var firsrBtn = document.getElementById('firsrBtn');
var iframeDoc = window.top.document.getElementById("first-iframe")["contentWindow"].document;
initIframeEvent(iframe, firsrBtn);
// iframe伸缩事件|前提是iframe是自适应的(通过css设置vh/vw)
window.top.document.getElementById("first-iframe")["contentWindow"].addEventListener("resize", (e) => {
console.log("Trigger resize event,current iframe height is " + iframeDoc.body.clientHeight + " and width is " + iframeDoc.body.clientWidth)
})
// F11触发iframe全屏(鼠标当前需要在iframe内)
iframeDoc.onkeydown = function (e) {
console.log("您点击了按键", e.key)
var e = event || window.event;
if (e && e.keyCode == 122) {
e.preventDefault();
var el = document.documentElement;
enterFullscreen(iframe)
}
};
// F11触发iframe全屏(鼠标当前需要在iframe内)
F11(iframeDoc, iframe)
</script>
</html>
test.js
// 主体全屏
function initEvent(doc, btn) {
btn.onclick = function () {
var fullscreenElement = getFullscreenElement(doc);
if (fullscreenElement) {
exitFullscreen(fullscreenElement);
} else {
enterFullscreen(doc.body);
}
}
// 监听fullscreenchange事件,是为了兼容F11和ESC按键操作
doc.addEventListener("fullscreenchange", () => {
var fullscreenElement = getFullscreenElement(doc);
if (fullscreenElement == null) {
btn.innerHTML = "全屏"
} else {
btn.innerHTML = "退出全屏";
doc.body.style.background = "white"
}
})
}
// iframe全屏
function initIframeEvent(iframe, btn) {
let doc = window.top.document;
btn.onclick = function () {
var fullscreenElement = getFullscreenElement(doc);
if (fullscreenElement) {
exitFullscreen(fullscreenElement);
} else {
enterFullscreen(iframe);
}
}
// 监听fullscreenchange事件,是为了兼容F11和ESC按键操作
doc.addEventListener("fullscreenchange", () => {
var fullscreenElement = getFullscreenElement(doc);
if (fullscreenElement == null) {
btn.innerHTML = "全屏"
} else {
btn.innerHTML = "退出全屏";
iframe["contentWindow"].document.body.style.background = "white";
}
})
}
/**
* 全屏
*/
function enterFullscreen(el) {
console.log("进入全屏的元素", el)
fullscreenState = true;
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
noFullscreenSupport();
}
};
/**
* 退出全屏
*/
function exitFullscreen(fullscreenElement) {
console.log("全屏元素", fullscreenElement)
fullscreenState = false;
// var doc = getIframe();
let doc = window.top.document;
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
} else {
noFullscreenSupport();
}
};
function noFullscreenSupport() {
fullscreenState = !fullscreenState;
alert('您的浏览器不支持全屏.');
};
function getFullscreenElement(doc) {
let el = doc.fullscreenElement ||
doc.mozFullScreenElement ||
doc.webkitFullscreenElement
return el;
}
function F11(doc,iframe){
doc.onkeydown = function (e) {
console.log("您点击了按键", e.key)
var e = event || window.event;
if (e && e.keyCode == 122) {
e.preventDefault();
enterFullscreen(iframe)
}
}
}
test.css
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
html{
height:100%;
}
body {
height: 100%;
margin: 0 auto;
padding:20px;
}
p {
font-size: 26px;
}
button{
border:1px solid #aaa;
padding:5px 15px;
border-radius: 6px;
background: #fff;
margin:10px;
cursor: pointer;
}
iframe {
height: 50vh;
width:60vw;
display: block;
margin:0 auto;
border:2px solid #00f;
}
/* 解决全屏黑色背景 */
.white:fullscreen {
background-color: #fff;
}
.white:-webkit-full-screen {
background-color: #fff;
}
