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页面上显示

在这里插入图片描述

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐