利用html5的postmessage解决iframe跨域问题的库cross-domain.js，使

I_Am 发布于2019-08-22 18:25 / 2044人阅读

摘要：简介一个利用的跨域解决一个系统中，多个跨域通信交互的库。然而各系统采用了不同的域名，与主框架系统和其它业务系统有跨域问题若将所有域名改为同一域名下可能会产生一些系统间页面元素和样式的冲突故采用了标准下的来解决该问题。

简介

一个利用html5的跨域api postMessage解决一个系统中，多个iframe跨域通信交互的js库。

github地址：cross-domain

背景

最初公司只有一个系统来做销售，随着公司业务越来越多，搭建很多类似的系统（这些系统本来是没有任何关系的，每个系统目前都非常复杂）。

由于目前公司战略有调整，原来的销售是针对某种产品，现在销售工作要针对客户进行多产品的销售促成，这样一个销售人员就需要打开各种系统进行业务操作，非常不方便，而且销售数据间不能有效传递，所就需要把各个不相关的系统整合在一起，实现跨业务线销售和数据共享。若将这想要将这些复杂系统整合在一起，无论是从人力物力上都是不太可能接受的。

所以选择了使用iframe将各系统嵌入一个框架系统，各系统从物理上还是分开不变，而从逻辑上（从用户角度看就是一个系统）看起来是一个系统。

然而各系统采用了不同的域名，与主框架系统和其它业务系统有跨域问题（若将所有域名改为同一域名下可能会产生一些系统间页面元素和样式的冲突）

故采用了HTML5标准下的postMessage来解决该问题。

介绍

示意图

http://a.com 是最外层主系统的页面，为master

http://b.com 和 http://c.com 为被嵌入的子系统slave，当然也可以嵌入N个子系统

master和slave都是有各自的域名，由于浏览器的安全限定，两个iframe正常是不能进行数据交换和api调用的。当然有一些特殊方法如jsonp,iframe name等。如果想了解，可以看看我的另一篇文章jsonp实现原理。

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。postMessage api详细介绍，请查看 postMessage

示意图如下：
https://raw.githubusercontent...

提供的主要API

js库提供了简洁的调用和提供接口的方法，介绍如下

接口调用（向其它iframe发送数据）

        /**
         * 发送消息方法
         * @param {String} componentName组件名称
         * @param {String} method接口名称（对方通过API extends提供的接口名）
         * @param {Object} data数据
         * @param {Function} callback回调
         */
         send : function(componentName,method,data,callback,type);

提供接口（提供前端接口，可供其它iframe调用）

       /**
        * 扩展接口方法,供调用方send方法调用
        * @param {String} name接口名称
        * @param {Function} fun 接口方法
        */
        extends : function(name,fun);

例子

Master代码如下

启动http服务，http://localhost/cross-domain...




    Test Page
    
    
    


    Test Page MASTER

Slave1

启动http服务，http://127.0.0.1/cross-domain...




    slave1
    
    


    
        I am salve1 frame

Slave2

启动http服务，http://127.0.0.1/cross-domain...




    slave2
    
    


    
        I am slave2 frame

交互效果

应用案例

某企业作业系统

GPU云服务器云服务器 iframe跨域利用html5的例子解决问题的方法 iframe载入数据问题

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

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

那些年曾谈起的跨域

摘要：在中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。在上面说过是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源请求。对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决...

galois 2019-08-23 18:13 评论0 收藏0
postMessage处理iframe 跨域问题

摘要：四传递信息给父页面参考跨域子页面传给父页面父页面代码崔涣测试父页面参数中有属性，就是父窗口发送过来的数据把父窗口发送过来的数据显示在子窗口中。五简单分析和安全问题传送过来的信息如下图，几乎包含了所有应该有的信息。背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给...

cooxer 2019-08-19 17:42 评论0 收藏0
关于跨域简单总结

摘要：开发者需要在中设置属性为跨域是的简称这是一种利用浏览器漏洞解决跨域的办法脚本元素可以不受浏览器同源策略的限制。什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(...

learning 2019-08-22 16:45 评论0 收藏0