嵌套外部网站并限制其操作的实现方式
在 ElementPlus 或 Vue3 中，是否提供类似 iframe 的方法，允许嵌套外部网站，同时限制其对外部网站的操作？
答案：
遗憾的是，父级无法控制 iframe 窗口中的所有操作。这是由于 iframe 属于一个独立的沙盒环境，它可以独立于父级应用程序操作。
原因：
立即学习“前端免费学习笔记（深入）”；
iframe 是一种将外部网站嵌入到当前网站中的方法。它创建了一个隔离的视图，允许来自另一个域的页面显示在当前页面上。为了保护用户的安全，浏览器的同源策略限制了不同域之间的交互。这意味着父级应用程序无法直接访问 iframe 中嵌套的页面 DOM 或与其交互。
替代方案：
虽然无法直接限制 iframe 中外部网站的操作，但你可以考虑以下替代方案：
- 跨域通信：如果 iframe 容器和外部网站属于同一个域，则可以通过消息传递或后端服务进行跨域通信。父级应用程序可以向 iframe 发送消息，iframe 可以响应并触发父级中的操作。
- 自定义 iframe 容器：如果你开发了 iframe 容器的代码，可以设计一个机制让 iframe 通过触发父级的方法来修改路由或执行其他业务逻辑。
- 限制 iframe 来源：只能将受信任的网站作为 iframe 的来源，以减少恶意代码的风险。
- 使用 Shadow DOM：Shadow DOM 创建了一个封装的 DOM 环境，将嵌套页面与其周围环境隔离起来，从而在一定程度上限制了外部网站的操作。
