1.重置其樣式，去掉外框以及滾動(dòng)條等

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元素，于是用了很笨的辦法去處理，希望路過(guò)的大佬可以指點(diǎn)一下，有好的辦法教教我好嗎？？

export default {

data() {

return {

mySrc: '',

loading: true, // 如果正在加載，就會(huì)蓋住展示內(nèi)容

timer: null, // 第1個(gè)定時(shí)器

timer1: null // 第2個(gè)定時(shí)器

}

},

mounted() {

if (this.$refs && this.$refs['iframe_a']) {

this.setLoading(this.$refs['iframe_a'])

} else {

// console.log('延時(shí)加載第一次')

clearTimeout(this.timer1)

this.timer1 = setTimeout(() => {

this.setLoading(this.$refs['iframe_a'])

}, 500)

}

},

destroyed() {

this.timer = null

this.timer1 = null

},

methods: {

// 補(bǔ)坑函數(shù)1

setLoading(iframeDom) {

if (iframeDom) {

// console.log('找到元素了，執(zhí)行iframeDom.onload')

const iframeD = document.getElementById('myIframeWebgl')

iframeD.onload = () => {

// console.log('加載完了-----------')

this.loading = false

}

iframeD.src = this.setRoute()

} else {

this.setTim()

}

},

// 補(bǔ)坑函數(shù)2

setTim() {

const iframeD = document.getElementById('myIframe')

clearTimeout(this.timer)

this.timer = setTimeout(() => {

// console.log('延時(shí)加載第----次')

this.setLoading(iframeD)

}, 200);

},

}

}

3.在此之前，加載完成的onload事件有時(shí)候不會(huì)觸發(fā)，點(diǎn)擊頁(yè)面有時(shí)候沒(méi)有反應(yīng)，地址改了但是頁(yè)面沒(méi)有變動(dòng)，于是解決如下：

問(wèn)題在于： iframe的綁定地址的代碼一定要放在onload下面，要不然就完了

如果使用原生來(lái)寫，大概這樣子

let myIframeDiv= document.querySelector('#myIframeDiv')

let iframe = document.createElement('iframe')

iframe.onload = () => {

console.log('這樣子就沒(méi)問(wèn)題了')

}

iframe.src = this.src // 就是這一行代碼，一定要注意哦

myIframeDiv.appendChild(iframe)

總結(jié)

以上是生活随笔為你收集整理的vue 给iframe设置src_vue 中引入iframe，动态设置其src,遇到的一些小问题总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。