前端--iframe爬坑记录

1、iframe通信

但是在开发过程中还是遇到了一些问题,比如:
iframe发出跳转消息 ---> vue页面处理消息,根据消息跳转至对应页面 ---> 对应页面点击跳转至原来的vue页面
如上过程在重复第二次的时候,从iframe发出的消息到vue页面的监听器中,会出现两次响应,且带出的两次消息分别为前几次和本次的,接下来的重复跳转过程都会有重复响应。

起先,我是怀疑window会缓存消息,因为刷新下页面,之前的响应消息就没有了,但是找了一大圈也没有清除window缓存的方法。且localstorage中没有缓存这些消息。
然后仔细发现,在打开第二个vue页面时,第一个vue页面被销毁了,再次回到第一个页面时,其实是重新加载了页面。我想这是由于vue基于组件来构建页面的原理所造成的,所以再一次构建组件时,会向window再次添加监听器。

anyway,解决方法如下:
既然会重复添加,那就在vue组件销毁时,删除window的监听器。

// 在组件生命周期结束的时候销毁
beforeDestroy() {
    if (window.addEventListener) {
        window.removeEventListener('message', this.handleMessage)
    } else {
        window.detachEvent('message', this.handleMessage)
    }
}

下面是添加监听器的代码

created() {
    if (window.addEventListener) {
        window.addEventListener('message', this.handleMessage)
    } else {
        window.attachEvent('message', this.handleMessage)
    }
}

2、iframe加载

在向iframe页面发送消息时,偶尔会有发不到iframe的现象。查阅了很多资料,后来发现这又是一坑。
https://blog.csdn.net/baidu_3...
在iframe没有加载完成的情况下,消息自然是发不到iframe的。但是既然发不到的话也应该报个异常啥的,竟然默默的就这样了,原理以后再解。

解决办法就是需要postMessage的事件写到iframe的load事件中,代码如下:

<iframe ref="iframe" :src="src" @load="getDataAndPost"></iframe>
getDataAndPost() {
    requestData().then(res => {
      this.$refs.iframe.contentWindow.postMessage(res, '*')
    }).catch(function(err) {
      console.log(err)
    })
}

相关推荐