前端--iframe爬坑记录

nanchen2251 发布于2019-08-02 12:01 / 830人阅读

摘要：且中没有缓存这些消息。查阅了很多资料，后来发现这又是一坑。在没有加载完成的情况下，消息自然是发不到的。解决办法就是需要的事件写到的事件中，代码如下

1、iframe通信

由于项目中有用到vue嵌入静态页面实现功能，vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11...

但是在开发过程中还是遇到了一些问题，比如：
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事件中，代码如下：

getDataAndPost() {
    requestData().then(res => {
      this.$refs.iframe.contentWindow.postMessage(res, "*")
    }).catch(function(err) {
      console.log(err)
    })
}

云服务器 GPU云服务器爬坑篇爬坑记爬坑 ifram

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53276.html

前端--iframe爬坑记录

摘要：且中没有缓存这些消息。查阅了很多资料，后来发现这又是一坑。在没有加载完成的情况下，消息自然是发不到的。解决办法就是需要的事件写到的事件中，代码如下 1、iframe通信由于项目中有用到vue嵌入静态页面实现功能，vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题，比如：ifra...

CntChen 2019-08-23 13:10 评论0 收藏0
前端爬坑日记之vue内嵌iframe并跨域通信

摘要：由于该项目是基于原本的安卓，做的微信，所以原来的使用的页面现在需要在中实现，那就是使用查看了很多很多文档，其中这一篇是很有价值的下面将天的爬坑最终以问答的方式总结如下组件中如何引入如何获取对象以及内的对象如何向内传送信息内如何向外部发送信息由于该项目是基于原本的安卓app，做的微信h5，所以原来的使用webview的页面现在需要在vue中实现，那就是使用iframe查看了很多很多文档...

dreambei 2019-08-23 11:42 评论0 收藏0
初入 Flutter 的爬坑过程（Windows10）

摘要：最近入坑在此过程遇到一些一般教程没有注意的问题，由此记录一下。教程看的是技术胖的免费视频技术胖教程。但对我这种半路出家的前端来说，打过几次也没成功，又不能不学，只能在网上找解决方法。最近入坑Fultter,在此过程遇到一些一般教程没有注意的问题，由此记录一下。教程看的是技术胖的免费视频技术胖Fultter教程。一般情况下按照此教程是可以慢慢把开发环境搭好的，但其中遇到如下问题：1....

IamDLY 2019-08-23 18:04 评论0 收藏0
peewee爬坑

摘要：代码示例用户基本信息用户名在视图函数更新数据更新只有调用字段的值才会在改变项目使用的，使用了语法数据库迁移管理，文档，文档 peewee update_time字段爬坑 SQLalchemy中BaseModel定义: # -*- coding:utf-8 -*- from datetime import datetime from sqlalchemy import Column, D...

ashe 2019-06-26 17:50 评论0 收藏0