前言:
开发中遇到点击让iframe全屏的需求,代码如下
<template>
<div>
<a-button type="primary" @click="screen">全屏</a-button>
<iframe
:src="url"
frameborder="0"
height="700px"
width="100%"
longdesc="请刷新页面"
id="con_lf_top_div"
allowfullscreen="true"
></iframe>
</div>
</template>
<script>
export default {
data() {
return {
url: '',
fullscreen: false,
}
},
methods: {
screen() {
let case= document.getElementById('con_lf_top_div')
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
if (case.requestFullscreen) {
case.requestFullscreen()
} else if (case.webkitRequestFullScreen) {
case.webkitRequestFullScreen()
} else if (case.mozRequestFullScreen) {
case.mozRequestFullScreen()
} else if (case.msRequestFullscreen) {
case.msRequestFullscreen()
}
}
},
},
}
</script>