vue使用iframe,点击按钮全屏
vue使用iframe,点击按钮全屏
·
vue使用iframe全屏,代码如下
<iframe
allow="fullscreen"
id="iframeId"
src="---------"
style="width: 100%; height: 96%"
></iframe>
<el-button
style="position: absolute; left: 90%; top: 53%"
type="primary"
size="mini"
@click="dianji"
>全屏</el-button
>
dianji() {
//设置后就是id==con_lf_top_div 的容器全屏
let case1 = document.getElementById("iframeId");
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 (case1.requestFullscreen) {
case1.requestFullscreen();
} else if (case1.webkitRequestFullScreen) {
case1.webkitRequestFullScreen();
} else if (case1.mozRequestFullScreen) {
case1.mozRequestFullScreen();
} else if (case1.msRequestFullscreen) {
// IE11
case1.msRequestFullscreen();
}
}
},
实现iframe页面通过点击按钮实现全屏,并且按钮可以在iframe页面上显示

更多推荐



所有评论(0)