vue 给iframe设置src_vue 中引入iframe，动态设置其src,遇到的一些小问题总结
1.重置其樣式，去掉外框以及滾動條等
id="myIframe"
ref="iframe_a"
:src="mySrc"
width="100%"
height="100%"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
scrolling="no"
allowtransparency="yes"
/>
2.在mounted里也找不到iframe 的dom元素，于是用了很笨的辦法去處理，希望路過的大佬可以指點一下，有好的辦法教教我好嗎？？
export default {
data() {
return {
mySrc: '',
loading: true, // 如果正在加載，就會蓋住展示內容
timer: null, // 第1個定時器
timer1: null // 第2個定時器
}
},
mounted() {
if (this.$refs && this.$refs['iframe_a']) {
this.setLoading(this.$refs['iframe_a'])
} else {
// console.log('延時加載第一次')
clearTimeout(this.timer1)
this.timer1 = setTimeout(() => {
this.setLoading(this.$refs['iframe_a'])
}, 500)
}
},
destroyed() {
this.timer = null
this.timer1 = null
},
methods: {
// 補坑函數1
setLoading(iframeDom) {
if (iframeDom) {
// console.log('找到元素了，執行iframeDom.onload')
const iframeD = document.getElementById('myIframeWebgl')
iframeD.onload = () => {
// console.log('加載完了-----------')
this.loading = false
}
iframeD.src = this.setRoute()
} else {
this.setTim()
}
},
// 補坑函數2
setTim() {
const iframeD = document.getElementById('myIframe')
clearTimeout(this.timer)
this.timer = setTimeout(() => {
// console.log('延時加載第----次')
this.setLoading(iframeD)
}, 200);
},
}
}
3.在此之前，加載完成的onload事件有時候不會觸發，點擊頁面有時候沒有反應，地址改了但是頁面沒有變動，于是解決如下：
問題在于： iframe的綁定地址的代碼一定要放在onload下面，要不然就完了
如果使用原生來寫，大概這樣子
let myIframeDiv= document.querySelector('#myIframeDiv')
let iframe = document.createElement('iframe')
iframe.onload = () => {
console.log('這樣子就沒問題了')
}
iframe.src = this.src // 就是這一行代碼，一定要注意哦
myIframeDiv.appendChild(iframe)
總結
以上是生活随笔為你收集整理的vue 给iframe设置src_vue 中引入iframe，动态设置其src,遇到的一些小问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python绘制饼图的如何设置高度宽度_
- 下一篇： vue入门（一）----工程vue_se