pdf.js控件预览之iframe局部-全屏显示切换

屁话不多说，直接上菜。（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.下期再会。