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)