iFrame全屏展示子页面内容,动态更新页面地址
<!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>iFrame全屏</title>
<style type="text/css">
.content {
height: calc(100vh - 20px);
margin: 0 auto;
background-color: aquamarine;
}
#iframe:-webkit-full-screen {
width: 100%;
height: 100%;
}
#fullScreen {
margin: 20px;
position: absolute;
right: 20px;
}
</style>
</head>
<body>
<div class="content">
<button id="fullScreen">全屏</button>
<iframe id="iframe" name="iframe" src="./demo.pdf#toolbar=0" width="100%" height="100%" scrolling="no"
frameborder="0"></iframe>
</div>
<Script>
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
document.getElementById('fullScreen').onclick = function () {
requestFullScreen(document.getElementById("iframe"));
}
function changeurl(url){
document.getElementById("iframe").src = url;
}
</Script>
</body>
</html>