## 思路 > 把子应用的代码在对应创建的 iframe 中执行,不需要特殊处理的上下文方法或属性代理到顶层上下文处理,需要特殊处理上下文方法改在 iframe 中修改后再代理出去,这样隔离处理会不会好一些
Activity
kuitos commentedon Mar 5, 2020
不错的想法,但是这个方案问题还是很多的。
主要是子应用的 js 里不单只有逻辑计算,还有各种副作用,比如 js 里需要对 url 做一个变更(跳转),js 里做一个弹框等等。本质上这个方案跟直接用 iframe 做嵌入是没有区别的,那 iframe 的问题你就需要再去解决了。
seanuu commentedon Mar 5, 2020
let iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
let iframeWin = iframe.contentWindow;
iframeWin.name = 'iframeWin';
window.name = 'window';
let iframeProxy = new Proxy(iframeWin, {
get: function (target, propKey, receiver) {
return Reflect.get(window, propKey, receiver);
}
// ...
});
// 子应用创建 挂载
let appModule = function app() {
console.log(location);
console.log(name);
};
let code =
(${appModule.toString()})();iframeProxy.eval(code);
seanuu commentedon Mar 5, 2020
检测了一下,这样操作的话在 iframe 环境运行代码,全局属性方法会从主应用window中找,设置iframe的全局属性,不会污染到主应用,设置后的全局属性在 iframe 环境也还能找到
seanuu commentedon Mar 5, 2020
好像还有很多问题,无视这个想法吧
kuitos commentedon Mar 5, 2020
欢迎各种方案或想法上的交流😀
kvchen95 commentedon Sep 7, 2022
hey bro. 你的想法实现了!参见腾讯wujie前端方案
gyk-123 commentedon Apr 5, 2023
solute !
aique127 commentedon Jun 22, 2023
腾讯应该给你一份offer
supuwoerc commentedon Aug 2, 2023
solute !
LukerSpringtree commentedon Nov 14, 2023
cool
Lu-xiao-hang commentedon Nov 15, 2023
good nice