在HTML5中,W3C制定了關(guān)于全屏的API捏境，就可以實(shí)現(xiàn)全屏幕的效果于游，也可以讓頁(yè)面中的圖片，視頻等全屏典蝌。目前只有g(shù)oogle chrome 15 +, safri5.1+,firfox10+,IE11支持
父頁(yè)面
<iframe
:src="screenUrl"
frameborder='0'
allowfullscreen="true"
scrolling="no"
width="100%"
height="100%"
>
</iframe>
如果是Iframe嵌套內(nèi)容曙砂，只需要在iframe中加入屬性
allowFullScreen = true
當(dāng)然，如果是iframe多層嵌套骏掀，需要給每一層都加上該屬性
子頁(yè)面
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
}
