iframe框架的属性src表示：iframe框架的src属性详解，用法与注意事项

来源：网络作者：日期：2025-10-25 14:14:48

iframe 是 HTML 中常用的一种嵌入式框架，它可以将其他网页嵌入到当前页面中，在 iframe 中，src 属性用于指定要加载的外部资源的 URL 地址，本文将详细解析 iframe 的 src 属性，包括其基本用法、常见场景以及一些需要注意的问题。

什么是 iframe 的 `src` 属性？

src 属性是 iframe 标签的必备属性之一，用于定义 iframe 加载的内容来源,其语法如下：

<iframe src="URL地址"></iframe>

URL地址 可以是绝对路径、相对路径，也可以是完整的网址（如 https://www.example.com）。

`src` 属性的基本用法

嵌入外部网页

最常见的用法是嵌入外部网站或资源：

iframe框架的属性src表示：iframe框架的src属性详解，用法与注意事项

<iframe src="https://www.example.com"></iframe>

嵌入本地文件

iframe 加载的是本地文件,可以使用相对路径或绝对路径：

<iframe src="about.html"></iframe>

使用 JavaScript 动态设置 `src`

通过 JavaScript，可以动态改变 iframe 的 src 属性：

// 获取 iframe 元素
const iframe = document.getElementById('myIframe');
// 设置新的 src
iframe.src = "https://www.newexample.com";

iframe 的 `src` 属性的常见场景

嵌入广告

许多网站使用 iframe 嵌入广告代码，通过 src 属性加载广告资源。

iframe框架的属性src表示：iframe框架的src属性详解，用法与注意事项

嵌入社交媒体内容

例如嵌入 Twitter、Facebook 或 Instagram 的内容：

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fexample%2Fposts%2F1234567890"></iframe>

嵌入地图

Google 地图提供了 iframe 嵌入功能：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.205192314099!2d116.407394!3d39.904242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404c00c018516701%3A0x8fa2d81c8d9d112!2sTiananmen%20Square!5e0!3m2!1sen!2scn!4v1650000000000!5m2!1sen!2scn" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

嵌入视频

YouTube、Vimeo 等视频平台也支持通过 iframe 嵌入视频：

iframe框架的属性src表示：iframe框架的src属性详解，用法与注意事项

<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>