iframe 详解和避坑

瑶琴AI前端

于 2024-04-22 09:42:30 发布

阅读量716

点赞数 23

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_40348267/article/details/138060661

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

<!DOCTYPE html>
<html>
<head>
  <title>iFrame 示例</title>
</head>
<body>
  <h2>嵌入一个网页</h2>
  <iframe src="https://www.example.com" width="800" height="600"></iframe>
  
  <h2>嵌入视频</h2>
  <iframe src="https://www.youtube.com/embed/视频ID" width="560" height="315"></iframe>
</body>
</html>

在这个示例中，<iframe> 标签用于嵌入一个网页和一个视频。以下是一些常用的属性：

1.src：指定要嵌入的网页或内容的 URL。

2.width：设置 <iframe> 的宽度。

3.height：设置 <iframe> 的高度。

4.frameborder：设置是否显示 <iframe> 的边框。常用值是 0 或 1。

5.scrolling：指定是否显示滚动条。常用值是 "auto" 或 "yes"。

6.allowfullscreen：允许嵌入的内容使用全屏模式（仅适用于某些内容，如视频）。

下面是一些 <iframe> 标签具体的示例用法:

1.嵌入地图：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3222..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

通过将 Google 地图嵌套到网页中，您可以在网页上显示交互式地图，帮助用户查找位置。

2.嵌入文档查看器

<iframe src="https://docs.google.com/viewer?url=https://www.example.com/document.pdf&embedded=true" width="600" height="450"></iframe>

你可以使用 Google 文档查看器嵌套 PDF 文件，使用户能够在网页上预览文档，而无需下载。

3.嵌入音频

<iframe src="https://www.example.com/audio.mp3" width="300" height="50" frameborder="0"></iframe>

通过嵌套音频文件，您可以在网页上播放音乐或音频内容。

4.嵌入其他 Web 应用：

<iframe src="https://webchat.example.com" width="400" height="600"></iframe>

你可以将其他 Web 应用嵌入到您的网页中，从而在同一页面上提供多个功能。

在使用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> 标签。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

瑶琴AI前端

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
iframe 详解和避坑

2.SEO 问题：搜索引擎可能无法正确地解析 <iframe> 中的内容，这可能影响页面的搜索引擎优化（SEO）。比如之前瑶琴遇到的一个小需求，需要在 PC 端显示移动端的某个商品详情页面，由 pc 端拼接参数到移动端链接上，获取到具体的商品信息后显示页面，就是用的 <iframe> 标签。始终确保嵌入的内容是可信的。上面就是关于 <iframe> 标签的用法了，<iframe> 标签在写网页中不常用到，但在一些特殊的场景中，还是会用到的。2）如果使用 <iframe>，请确保嵌入的内容来自可信任的源。
复制链接

扫一扫