在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏。目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持
父页面
<iframe
:src="screenUrl"
frameborder='0'
allowfullscreen="true"
scrolling="no"
width="100%"
height="100%"
>
</iframe>
如果是Iframe嵌套内容，只需要在iframe中加入属性
allowFullScreen = true
当然，如果是iframe多层嵌套，需要给每一层都加上该属性
子页面
HTML
<div class="top-left" @click="FullScreen" ></div>
js
FullScreen () {
if (this.FullScreenState == false) {
// 全屏
let de = document.documentElement
if (de.requestFullScreen) { // W3C
de.requestFullscreen()
} else if (de.mozRequestFullScreen) { // FireFox
de.mozRequestFullScreen()
} else if (de.webkitRequestFullScreen) { // Chrome等
de.webkitRequestFullScreen()
} else if (de.msRequestFullscreen) { // IE11
de.msRequestFullscreen();
}
this.FullScreenState = true
} else {
// 退出全屏
let de = document
if (de.exitFullscreen) {
de.exitFullscreen()
} else if (de.mozCancelFullScreen) {
de.mozCancelFullscreen()
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullscreen()
}
this.FullScreenState = false
}
