一、背景

在web页面开发中，有时会遇到在一个应用A的页面中引用应用B的页面，此时就需要在应用A中使用iframe嵌入引用B的页面了，比如多租户的web应用，或者门户系统的智能客服助手弹框应用，博主也是在做通用智能客服应用的过程中用到了iframe。网络上有关iframe的信息虽然很多，但是很少能够简洁高效地将iframe基本用法阐述清楚，因此写下本篇博客希望能够对大家有所帮助。

二、开源应用

iframe开源Demo项目也有很多，个人认为比较优秀的有 vue-beautiful-chat ，对于做智能客服弹框有一定的参考价值，感兴趣的同学自行研究，页面样式如下所示。

三、基本用法

iframe是 HTML 中的一个元素，用于在当前 HTML 文档中嵌入另一个 HTML 文档。它允许你在网页中显示另一个网页，就像在网页中的窗口中一样。

以下是 的基本用法:

<iframe src="url"></iframe>

其中 “url” 是你要嵌入的另一个网页的 URL 地址。这个网页可以是你自己的网站上的另一页，也可以是外部网站的地址。

常见属性

• src：指定要嵌入的HTML文档的URL。
• width 和 height：指定iframe的宽度和高度，可以是像素值或百分比。
• frameborder：指定是否显示iframe的边框。通常设置为0或"no"以隐藏边框。
• scrolling：指定是否显示滚动条。可能的值有"yes"、"no"和"auto"。但注意，现代浏览器通常不再支持这个属性，而是依赖于CSS的overflow属性。
• name：为iframe指定一个名称，以便在脚本中引用。
• sandbox：启用安全特性，限制iframe中的内容与外部页面的交互。例如，sandbox="allow-scripts"允许脚本执行，但不允许表单提交或弹出窗口。
• allow 和 allowfullscreen：与媒体内容（如视频）的嵌入和交互相关。例如，allow="autoplay; encrypted-media"允许自动播放和加密媒体内容。

示例：

<iframe src="https://example.com" width="500" height="600" frameborder="0" scrolling="no" name="myIframe" sandbox="allow-scripts"></iframe>

注意事项

1. 安全性：由于iframe可以嵌入任何外部内容，因此需要特别小心以防止跨站脚本攻击（XSS）。确保您只从可信的来源嵌入内容，并启用适当的安全特性，如sandbox属性。
2. 兼容性：虽然大多数现代浏览器都支持iframe，但某些较旧的浏览器或特定设备可能会有所不同。在设计和实现时，请考虑目标受众的浏览器和设备兼容性。
3. SEO：搜索引擎通常很难索引iframe中的内容，因此如果您的网站内容对于搜索引擎排名很重要，请避免过度使用iframe。
4. 可访问性：确保iframe中的内容对于所有用户（包括使用辅助技术的用户）都是可访问的。这可能需要额外的标记和脚本。
5. 样式和布局：iframe可能会对其父文档的样式和布局产生影响，特别是当它们的尺寸或边框发生变化时。请务必仔细测试以确保在所有情况下都能正常工作。

四、iframe参数传递

当应用 A 通过 <iframe>