• iframe的使用


    <template>
      <wg-section>
      <div class="video-details-box">                                                                                                                                                                                                                                                                                  
        <div style="float: left; 930px;">
          <widget-box style="margin-bottom: 10px; overflow: hidden;">    
            <div style="padding: 20px;" >
              <div style="position: relative;888px ;height: 500px;float: left">
                       <div class="open-all" style="position: absolute;bottom: 10px; right: 10px;z-index: 999;">
                         <img src="../../images/resource/allOpen.png" @click="showPdf"/></div>
                        <div class="iframe-box" >
                          <iframe 
                        id="iframeId" src="https://www.skyworthedu.com.cn/lab/1717.applet/1.htm" frameborder="0" class="pc iframe"  scrolling="auto"                             
                        >
                    </iframe>
              </div>
              </div>
            </div>  
          </widget-box>
        </div>
      </div>
    <!-- 点击全屏 -->
    <div class="big-pdf-box" style="z-index: 9999;" v-if="allScreen">
        <div style="position: absolute;1200px;height: 800px;top: 50%; left: 50%;margin-top: -400px;margin-left: -600px;">           
               <div class="open-all" style="position: absolute; bottom: 20px;right: 20px;z-index: 999;"> 
                 <img src="../../images/resource/tuichuquanping.png" @click="allScreen=false"/></div>
                <div class="iframe-box" >
                  <iframe 
                  id="iframeId" src="https://www.skyworthedu.com.cn/lab/1717.applet/1.htm" frameborder="0" class="pc iframe"  scrolling="auto"                             
                  >
              </iframe>
        </div>
        </div>  
      </div>
      </wg-section>
    </template>

    <script>
      import config from '../../config/config';
      export default {
        name: "videoDetails",
        data() {
          return {
            allScreen: false,
            data: {},
          }
        },
        components:{     
          },
        computed: { 
        },
        watch: {
        },
        methods: {
          showPdf() {
            this.allScreen=true;
            // this.toTop();
          },
    //点击跳转网页头
          // toTop() {
          //  let that = this
          //  that.scrollTop = document.documentElement.scrollTop;
          //  let timer = setInterval(() => {
          //    let ispeed = Math.floor(-that.scrollTop / 5)
          //    document.documentElement.scrollTop -= 50;
          //    if (document.documentElement.scrollTop < 50) {
          //      clearInterval(timer)
          //      document.documentElement.scrollTop = 0;
          //    }
          //  }, 10)
          // },
          doQuery() {
            let param = {
              'id': this.$route.query.resourceId,
              'type': this.$route.query.type
            }
            let api = 'get-resource-by-id-and-code'
            let getApi = 'get-recommend'
            if (this.$route.query.type==='experiment') {
              api = 'get-lab-by-id'
              getApi = 'get-lab-recommend'
            }
            let _that = this
            this.$get(api, param).then(result => {
              this.data = result;
              document.getElementById("iframeId").src=result.labPath ;
              //https://www.skyworthedu.com.cn/lab/1717.applet/1.htm
            }).catch(error => {
              console.log(error)
            })
          },
        },
        mounted() {
          // this.doQuery();  
        }
      }
    </script>

    <style scoped="scoped">
    .iframe {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
         100%;
        height: 100%;
        background: #fff;
        overflow-y: hidden;
    }
      .big-pdf-box{
         100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
      }
    </style>
  • 相关阅读:
    命令行语法格式及特殊字符
    自己实现strncasecmp
    [windows bat]如何启动一个新的cmd窗口并在其内执行命令
    关于怎么提取m3u8地址
    如何获取各大平台的播放地址(获得优酷的m3u8播放地址)为例
    Python爬取视频指南
    win10更改pip源
    python获取文件路径
    sublime 经验总结 主题有 less2css
    35 个必须有的Bootstrap工具和生成器
  • 原文地址:https://www.cnblogs.com/Serendipity-zly/p/12795151.html
Copyright © 2020-2023  润新知