iframe的使用
Posted serendipity-zly
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe的使用相关的知识，希望对你有一定的参考价值。
<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的使用的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？