一个关于 iframe 很艹蛋的前端需求

业务是这样的

我们用 iframe 调用了 [被调用方] 的页面，然后 [被调用方] 页面一些 a 标签的 target 是“blank”的，这就导致点击他们的 a 标签会打开新的 tab

而现在的需求是，在 iframe 里的任何操作，都 [ [不允许弹出新 tab 或者新窗口] ] ，如果 [被调用方] 的页面的确是要打开新 tab 的，那就改为在本地页面跳转。

正常来说是无法实现的，因为跨域，而且 [被调用方] 肯定不会改代码的，所以只能写了个浏览器插件，通过注入代码的形式强行把网页里所有的 a 标签的 target 改为 self，这样 a 标签就全都是本地跳转

但是 [被调用方] 网页里面的业务不一定全是用 a 标签来打开新 tab，他们可能一些业务是用 js 来打开新 tab 的（类似于 window.open 这种，我尝试在插件里把 window.open 覆写成 window.location.href,但也只是部分按钮实现了，有些还是会跳出新页面）

现在问题如下： 1.被调用方是肯定不会改代码的，这个无解

2.已经能通过写浏览器插件的方式来注入代码强改客户代码的 a 标签（因为被调用方是不同域的，而且非互联网项目，装插件的设备也就那么几台，也不麻烦）

3.不能说这玩意不能做，因为项目跑在超高分大屏（电影院银幕大小）上，网页全屏显示，他有这种需求是因为打开新 tab 会强制关掉网页全屏，导致观感不好

然后如何完美实现？？（虽然以我的见解这玩意是无法实现的，用浏览器插件来搞已经很仁至义尽了）

zqx

2021-02-03 06:51:08 +08:00

避免 iframe 的安全策略，就肯定不能用 iframe 了。
可以在你的 js 里，把别人的 html 请求回来，解析并插入到自己的 DOM 中，再请求 css js，是 vue 或 react 或原生 js，按对应的逻辑执行。关键难点在于要拿到他的路由和状态管理，如果他没有在代码里显式导出给你，就很难拿到，需要从源码里找
微前端的实现大概也是这个思路

ArthurSS

2021-02-03 11:15:21 +08:00

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe
sandbox
该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有：
...
allow-popups: 允许弹窗 (例如 window.open, target="_blank", showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
...