iframe全屏

html:

<div style="position: absolute;left:0;top: 0;">
<input type="button" onclick="clickFun('baidu')" value="百度网全屏">
<input type="button" onclick="clickFun('taobao')" value="淘宝网全屏">
<input type="button" onclick="clickFun('qq')" value="腾讯网全屏">
</div>
<iframe id="baidu" name="baidu" frameborder="0" src="https://www.baidu.com/"></iframe>
<iframe id="taobao" name="taobao" frameborder="0" src="https://www.taobao.com/"></iframe>
<iframe id="qq" name="qq" frameborder="0" src="https://www.qq.com/"></iframe>

css:

*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#baidu{
100%;
height: calc(40% - 10px);
border-bottom: 10px solid #c1c1c1;
}
#taobao{
calc(40% - 10px);
height: 60%;
float: left;
border-right: 10px solid #c1c1c1;
}
#qq{
60%;
height: 60%;
background: #fff;
}
iframe{
display: block;
}

js:

function clickFun(id){
launchFullscreen($("#"+id)[0]);

}
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
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();
}
}

另外：跨域情况下父iframe加属性allowfullscreen="true"即可

<iframe name="baidu" allowfullscreen="true" frameborder="0" src="http://127.0.0.1:8833/baidu.html"></iframe>