屁話不多說，直接上菜。（pdf.js預覽pdf就不多說，需要了解可以查看之前的博客）
<button type="button" v-on:click="openPage()"><i class="el-icon-rank"></i>全屏</button>
設置button的點擊事件：
openPage: function () {
var ob = document.getElementById("dv2");//要全局顯示的元素(若整個頁面進入全屏：document.documentElement)
this.launchFullscreen(ob);
},
launchFullscreen: function (element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
},
exitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
我這里是銜接上篇博客pdf局部預覽后續的補加全屏功能。
延申：關於嵌套iframe不能顯示全屏問題。
解決辦法：最好給所有的嵌套iframe加屬性：allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" 全屏屬性支持瀏覽器兼容。
燈紅酒綠的社會，保持初心，相信愛情。親昵的陌生人，we can't stop~ for everyone.下期再會。