前端--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)
    })
}