发表于 | 分类于 | | 热度: ℃
字数统计: 553 | 阅读时长 ≈ 2

背景

最近项目上通过iframe嵌入了一个公司其他组开发的工业组态，所以之前的几个文章都是在解决iframe跨域通信的问题.因为项目部署在阿里云上，域名类似于xxx.com，而iframe嵌套的组态是一个子域名页面，类似a.xxx.com。

单点登录

因为是别的组开发的组态，所以实际上在开发中也是需要登陆的，通过将子域名的domain使用了domain.cookie=”xxx.com”设置成主域名的方式共享了cookie中在登录时存储的token，使得用户登录后访问组态不用再次登陆.

iframe通信

因为iframe里面实际上时用canvas画的工业组态，然后在iframe外面有一些按钮，需要放大缩小组态，这就牵扯到iframe和外面的通信，通过h5的postMessage，使用事件的方式完成了通信。

主要的问题解决了，剩下的就是通过组态页面的点击，在页面上获取数据，使用canvas画图，一直没有使用canvas的场景，常用的数据可视化都是使用echart等库完成了，最近刚好业务上使用，打算花点时间看看canvas

阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 354 | 阅读时长 ≈ 1

HTML DOM Element 对象

最近在看react状态驱动视图的具体实现，里面通过creatElement方法将dom字符串转换成dom元素，进而绑定事件；然后又使用insertBefore和removeChild方法通过state的变化重新调用render方法刷新视图；看到这顺便整理一下dom中对元素增删改查的基本方法，方便后面使用查看….

阅读全文 »

发表于 | 分类于 | | 热度: ℃
字数统计: 1.3k | 阅读时长 ≈ 5

react读书笔记

现在基本上angularjs，react和vue都用过好几个项目了。根据项目，技术栈也在不断变化，长时间不写总有点生疏，最近回过头来看一下react的东西，记录一下，方便后面回过头来看…

阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 924 | 阅读时长 ≈ 3

document.domain

前面已经介绍了怎么使用jsonp跨域获取数据，怎么使用h5的postMessage跨域在多窗口之间传递消息，经常遇见的业务需求还需要跨域共享cookie或者跨域获取dom元素，今天说一下document.domain的方式实现跨域…

  • 只能用于主域名一样的场景（操作dom或者发送数据交互）
阅读全文 »

发表于 | 分类于 ， | | 热度: ℃
字数统计: 783 | 阅读时长 ≈ 3

在跨域和jsonp的文章里面已经介绍了跨域的基本概念，也介绍了jsonp跨域的原理(script标签+服务器和客户端约定好callback)基本写法和jquer封装;本文介绍window.postMessage()的h5接口实现不同窗口不同页面的跨域通信;

  • 可以发送数据
  • 可以通过发送特定的事件名称，在onMessage里面执行回调，类似于angular的emit和on的关系然后操作dom
阅读全文 »