码迷,mamicode.com
首页 > 其他好文 > 详细

iframe的使用

时间:2020-04-28 16:53:19      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:import   lin   template   click   idg   rip   detail   pat   isp   

<template>
  <wg-section>
  <div class="video-details-box">                                                                                                                                                                                                                                                                                  
    <div style="float: left;width: 930px;">
      <widget-box style="margin-bottom: 10px; overflow: hidden;">    
        <div style="padding: 20px;" >
          <div style="position: relative;width: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;width: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;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: hidden;
}
  .big-pdf-box{
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
  }
</style>

iframe的使用

标签:import   lin   template   click   idg   rip   detail   pat   isp   

原文地址:https://www.cnblogs.com/Serendipity-zly/p/12795151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!