iframe跨域通信方案

概述

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

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，acom 域名下的js无法 *** 作bcom或是cacom域名下的对象。更详细的说明可以看下表：

对于主域相同子域不同的通信方法这里不一一列举了，这里主要讲解一下跨主域的通信问题。

postMessage方法

windowpostMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 >vue中iframe页面还能使用全局的一些变量吗：
vue中iframe页面还能使用全局的一些变量。
在iframe页面中有诸多跳转，当完成玩iframe页面中一些 *** 作时，此时点击浏览器的回退功能，那么恭喜你中奖了，你回退的是iframe页面，并无法回退和iframe无关联的vue页面，一直点击浏览器的回退，可能会一直重复iframe连接的几个页面，或直接404，或空白。

1、在父页面访问Iframe子窗体的txtAddress控件 windowframes["ifrMapCompanyDetails"]documentall("txtAddress")value = '地址' ; 2、在Iframe子窗体1访问父页面的TextBox1控件 , 子窗体1把值赋给子窗体2的某个控件 string strValue =

在iframe加载的页面上，调用 parent 对象的方法即可。
假定外面的页面定义了一个函数 test()
那么在iframe加载的页面上调用 parenttest()
即可得到test()的返回值。
其他的用法，你自己依此类推吧。
祝你好运！

1、iframe的创建比一般的DOM元素慢了1-2个数量级

iframe的创建比其他包括scripts和css的DOM元素的创建慢了1-2个数量级。当然页面一般不会包含太多的iframe，所以创建DOM节点花费的时间还不会占很大比重。

2、阻塞页面加载

及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当onload事件加载延迟后，它给用户的感觉是这个网页非常慢。
window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。通过Javascript动态设置iframe的src可以避免这种阻塞情况。

3、唯一的连接池

浏览器只能开少量的连接到web服务器。绝大部分浏览器，主页面和其中的iframe是共享这些连接的。这意味着iframe在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果iframe中的内容比主页面的内容更重要，这当然是好的。但通常情况下，iframe里的内容是没有主页面重要的。这时iframe用光可用连接就不值得了。

4、不利于SEO

搜索引擎的检索程序无法解读iframe。另外，iframe本身不是动态语言，样式和脚本都需要额外导入。

综上，iframe应谨慎使用。

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

主框架不限制接入应用的技术栈，微应用具备完全自主权

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

1url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的d框，同时我们要求这个d框要浏览器居中显示，还要浏览器 resize 时自动居中。
3全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。过于基础，成本太高，不建议。

qiankun是阿里推出的一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。因为是基于single-spa进行封装，所以single-spa的特点也被qiankun继承下来。成本低于single-spa，高于MicroApp。

MicroApp是京东推出的一款基于类WebComponent进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。

single-spa github地址： >