iframe（Inline Frame） 是一种 HTML 标签，它允许在一个网页内部嵌套加载另一个网页，从而实现在主页面中展示外部网页内容的功能。iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。
基本用法
直接在模板中使用 <iframe> 标签： 在Vue组件的模板部分，你可以直接插入<iframe>标签，并设置src属性指向你想要嵌入的页面URL。
2.设置 src 属性：
src属性应该包含你希望加载的外部网页的URL。你可以直接硬编码这个URL，或者像上面的例子那样，使用数据属性动态绑定。
3.CSS样式：
通常，你需要为<iframe>设置宽度和高度，以确保它能够正确填充其父容器。你可以使用CSS来设置这些样式。
4.动态设置 src 属性
如果<iframe>的内容需要根据某些条件动态改变，你可以使用Vue的数据绑定特性来实现这一点。
完整vue代码如下
注意事项
1.同源策略：由于浏览器的同源策略限制，只有当嵌入的页面与当前页面具有相同的协议、域名和端口时，才能访问到<iframe>内的DOM。
2.CORS：如果需要与<iframe>内部的页面进行交互（例如，发送请求或修改内容），则需要确保3.目标页面支持跨源资源共享(CORS)。
4.安全性：确保你嵌入的是可信的站点，因为恶意内容可能会危害到你的用户或网站。
5.性能：嵌入大型或复杂的页面可能会影响你的网站性能，因此要谨慎选择嵌入的内容。
1.打开F12找到iframe标签中的src路径
2.右键点击跳转找到嵌套内容界面，微前端内跳转子界面同理
1.src：这是最基本的属性，用于指定要加载的文档的URL。
2.width 和 height：这两个属性用于定义<iframe>的宽度和高度，可以是像素值或百分比。
3.frameborder：此属性用于设置<iframe>周围的边框。默认情况下，边框是存在的，但是可以将其设置为0来移除边框。
4.name：用于给<iframe>命名，可以用于表单提交的目标。
5.allowtransparency：布尔属性，用于指定<iframe>背景是否透明。
6.scrolling：用于控制<iframe>内部页面是否显示滚动条。可以设置为auto（自动）、yes（总是显示滚动条）或no（不显示滚动条）。
7.sandbox：增强的安全性选项，可以限制<iframe>的内容，如不允许形成弹窗、不允许提交表单等。
8、loading：指示浏览器何时开始加载<iframe>的内容。可以是eager（立即加载）或lazy（延迟加载）
9.referrerpolicy：定义了当请求<iframe>的src时，应该发送什么样的referrer头。
10.allow：用于指定<iframe>内容可以使用的特定API，例如allow="camera; microphone"。
微前端架构允许将一个大的应用程序拆分成多个小的子应用，每个子应用可以独立开发、部署和维护。使用<iframe>作为微前端解决方案是一种简单有效的方法，尤其是在需要隔离子应用的情况下。下面详细介绍如何使用<iframe>实现微前端解决方案。
1. 还不清除微前端的LOOK基本概念
主应用：负责管理和渲染各个子应用。
子应用：独立的小应用，可以是不同的技术栈或框架。
通信机制：主应用和子应用之间需要一种通信机制来传递消息。
2. 接下来我们LOOK实现步骤
步骤 1: 创建主应用
主应用负责加载和渲染各个子应用。首先创建一个主应用，开发中一般将系统管理平台设置为主。
步骤 2: 创建两个子应用
子应用可以是任何技术栈的应用，例如React、Vue或Angular。每个子应用需要能够在<iframe>中正常运行。
子应用代码示例
假设你有两个子应用：subapp1和subapp2。
子应用1 (subapp1)
子应用2 (subapp2)
步骤 3: 实现通信机制
主应用和子应用之间需要一种通信机制来传递消息。通常使用window.postMessage来实现跨域通信。
主应用通信代码