iframe 详解和避坑

iframe 详解和避坑-CSDN博客

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

在使用iframe标签时，需要避的坑：

1.安全性问题：使用 <iframe> 可能引入安全隐患，特别是当嵌入的内容来自不受信任的源时。这可能导致跨站点脚本攻击（XSS）和点击劫持等问题。始终确保嵌入的内容是可信的。

2.SEO 问题：搜索引擎可能无法正确地解析 <iframe> 中的内容，这可能影响页面的搜索引擎优化（SEO）。特别是，嵌套在 <iframe> 中的文本可能无法被搜索引擎索引。

3.响应式问题：<iframe> 的内容可能不会适应不同设备的屏幕大小，从而导致响应式设计问题。确保嵌入的内容具有适应性，或者在移动设备上提供更好的体验。

4.性能问题：每个 <iframe> 都会创建一个额外的浏览器渲染上下文，这可能会影响页面性能。过多的嵌套 <iframe> 可能导致性能下降。

5.用户体验：某些情况下，<iframe> 可能会导致用户体验下降，例如加载时间延长、滚动条行为异常等。

6.无法访问的内容：如果嵌入的内容不支持嵌套，可能会导致部分用户无法正常访问。

为了避免这些问题，您可以：

1）尽量避免使用 <iframe>，尝试使用更现代的技术来实现类似的功能。

2）如果使用 <iframe>，请确保嵌入的内容来自可信任的源。

3）在嵌套的内容中提供替代方案，以便用户在无法访问 <iframe> 内容时也能获取重要信息。

4）确保嵌入的内容具有良好的响应式设计，适应不同的屏幕大小。

5）考虑页面性能，并尽量减少不必要的 <iframe> 使用。

上面就是关于 <iframe> 标签的用法了，<iframe> 标签在写网页中不常用到，但在一些特殊的场景中，还是会用到的。

比如之前瑶琴遇到的一个小需求，需要在 PC 端显示移动端的某个商品详情页面，由 pc 端拼接参数到移动端链接上，获取到具体的商品信息后显示页面，就是用的 <iframe> 标签。
 
                        
原文链接：https://blog.csdn.net/weixin_40348267/article/details/138060661