"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?)。

更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次。收获挺多,发现的问题也挺多。

一直也在思考一些问题:

如何把自己遇见的问题好好的理解并且总结?

如何很好的学习新知识,不只是停留在用的基础上?

……

上面的问题我一直在尝试更适合我的方法,暂时就不扯淡了,先尝试一下把这段时间过程中遇见的问题总结下,然后争取给看文的你以我的方式描述清楚,我想我应该就把第一个问题解决了。

简介

项目实战中postMessage的使用

问题描述

前提:我们的项目与兄弟团队的项目都是基于同一套基础框架开发,只是在视图层我们有各自的一套东西。

项目是一个hybrid项目,目前是以h5的形式在开发,后期可以轻松转为hybrid。目前已经以h5的形式上线到自家公众号,大致是在硬件上产出一份报告,h5把报告的内容展示出来。

新需求是,把报告推给兄弟团队的APP,在APP内也能打开我们的报告进行查看报告然后点评。

兄弟团队为了最小的改动实现这个功能,用了iframe的形式打开我们推过去的报告链接,问题就出在报告能在兄弟团队的APP中打开却不能跳转链接,问题是因为我们的基础框架提供的forward方法在app内是通过native的方式来跳转,但是我们的协议不会被兄弟团队的app识别,简单说就是跳转直接被拦截了。

经过几番商量,商定出三个解决方案:

  • iframe跨域通信
  • 他们重新做一套(不可取的备选)
  • 我们来实现他们的点评业务(业务交错不可取)

杂货铺中的知识点

很明显我们更倾向于第一种方式,仿佛记得之前总结过类似的一篇文章同源策略和跨域知识点学习,当时完全是参考知识点进行的一次搬移,现在看来完全还是没有透彻理解。

  • 同源:同源即需要协议主机名(域名或者ip)端口相同。
  • 跨域:域名不一致了,自然是不同源的,这种情况下要通信何解呢?

postMessage派上用途。

h5模式下子页面跳转协议可以正常使用history模式或者非单页模式跳转。(知识点:这种情况下iframe的src不会随iframe内跳转链接的变化而变化,父页面不能监听到子页面内的页面变化)

hybrid模式下链接跳转被拦截,页面表现就是链接点不了,如何让父元素知道我点了什么链接,然后来切换页面,他们做url更换,来实现跳转并且支持切换页面操作,如此我们就需要子页面给父页面发送一条message告诉它我要跳转到哪一个页面。

实战知识点

页面跳转中我们使用了$forward方法进行收口,所有的跳转都需要经过这个方法(对于收口的好处这里就体现出来了),我只需要判断ua在跳转前执行以下消息发送的方法。

/**
* 页面跳转方法
* @param page 要跳转的页面名称
* @param param 跳转时需要额外携带的参数
*/
$forward(page, param) {
// _ extend getUrlParam getUrlRule loadPage isHybrid 省略
var param = _.extend(_.getUrlParam(), param);
let url = _.getUrlRule(page, param);
if(isHybrid) {
_.requestHybrid({
// 省略
});
} else {
_.loadPage(url);
}
}

在跳转前我们先检测一下ua,判断是否是在兄弟团队app内做特殊处理

let ua = navigator.userAgent.toLowerCase(),
isFriendHybrid = /friend_hybrid_\w+_(\d*\.?)+/.test(ua);
if(isFriendHybrid) {
window.top.postMessage({
tag: 'forward',
url: url
}, '*')
} else {
this.$forward();
}

在兄弟团队的父页面只需要监听message事件获取我传递过去的消息做特殊处理即可

window.addEventListener('message', function(e) {
console.log(e.data);
// {tag: 'forward', url: ……}
})

例如在一个特殊位置我会在没有pdf的时候直接弹出调试“暂时没有报告”,用户点击之际显示的是我弹出的toast,由于嵌入后有兼容问题,于是我们又约定了一个方法。

window.top.postMessage({
tag: 'showtoast',
content: '暂时没有报告'
}, '*')

这应该就是一个典型的iframe跨域通信例子。

demo

https://jsfiddle.net/unofficial/xwaksbvn/

iframe跨域通信实战的更多相关文章

  1. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  2. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  3. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

  4. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

  5. Javascript 使用postMessage对iframe跨域传值或通信

    实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 父页面代码:www.a.com/a.html <iframe id="myIframe" src ...

  6. 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  7. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  8. js中各种跨域问题实战小结(二)

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  9. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

随机推荐

  1. ubuntu 14.04 rabbitmq集群部署

    1.准备机器,我这边准备的是三台ubuntu14.04 机器主机名不能相同,不然节点冲突 2.安装rabbitmq 3.修改hosts文件 root@abc-web-04:~# vim /etc/ho ...

  2. redis的线程模型是什么?

    1.面试题 redis和memcached有什么区别? redis的线程模型是什么? 为什么单线程的redis比多线程的memcached效率要高得多(为什么redis是单线程的但是还可以支撑高并发) ...

  3. centos为docker配置加速器

    国内拉去docker镜像慢得可怜,为了解决这个问题,可为docker配置加速器. 1.修改daemon配置文件 sudo mkdir -p /etc/dockervim /etc/docker/dae ...

  4. 记一次Dynamic Batching不生效的爬坑实例分析[Unity]

    最近在项目开发过程中,无意发现游戏场景的绘制占用了大量的Batches,几乎一个模型显示就占用了一个Batch,而Saved by batching数量几乎为0,即没有任何合批渲染优化.这显然跟预期相 ...

  5. 微信小程序开发----微信开发者工具使用

    新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选 ...

  6. unittest中常用的几个断言

    a.相等 (a==b)内容一样,类型一致 from init import * import unittest class Baidu_Title(Info): def test_baidu_titl ...

  7. JS HTML DOM代码(1)

    <!DOCTYPE html> <html> <style type="text/css"> #容器 { width: 400px; heigh ...

  8. Java精确测量代码运行时间

    Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...

  9. React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...

  10. SUSE12Sp3-.NET Core 2.2.1 runtime安装

    1.安装libicu依赖 1.在线安装 sudo mkdir /usr/local/dotnet #创建目录 cd /usr/local/dotnet sudo wget https://downlo ...