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)

Logo

前往低代码交流专区

更多推荐