object和embed标签的作用是什么？外部资源如何嵌入？-html教程-PHP中文网

object和embed标签因依赖不安全、性能差的浏览器插件（如flash）而逐渐被淘汰；2. 现代替代方案包括语义化更强、原生支持的html5标签，如<iframe>嵌入网页、<video>/<audio>处理音视频、<img>显示图片、<link>引入样式表和图标、<script>加载脚本；3. 安全方面需关注同源策略、sandbox沙盒隔离、content security policy（csp）防范xss攻击，并注意第三方资源的用户隐私合规；4. 性能优化应采用懒加载（loading="lazy"）、资源压缩、异步加载脚本、预连接（preconnect/dns-prefetch）以及设置固定尺寸避免布局偏移。这些措施共同确保外部资源的安全高效集成。

object和embed标签的作用是什么？外部资源如何嵌入？

object

登录后复制

和

embed

登录后复制

标签在 HTML 中扮演着嵌入外部非 HTML 内容的角色，你可以把它们想象成网页上的一个“窗口”，用来展示一些浏览器本身不直接渲染的文件格式，比如早期的 Flash 动画、Java 小程序、PDF 文档，甚至是音视频文件。而“外部资源如何嵌入”这个大问题，其实远不止这两个标签，它涵盖了从最基本的图片、音视频，到复杂的第三方应用、整个网页等多种形式，核心就是通过特定的 HTML 标签和属性，告诉浏览器去哪里获取这些资源，以及如何展示它们。

解决方案

说到

object

登录后复制

和

embed

登录后复制

标签，它们在 HTML 的发展历程中，确实是扮演过重要角色的。

object

登录后复制

标签是一个非常通用的嵌入容器，它设计的初衷就是为了能处理各种各样的外部对象，不仅仅是多媒体，甚至可以是 ActiveX 控件或者其他浏览器插件才能识别的内容。它的灵活性在于可以通过

data

登录后复制

属性指定资源的 URL，

type

登录后复制

属性指定 MIME 类型，然后通过嵌套

<param>

登录后复制

标签来传递参数给嵌入的对象。比如说，你想在网页里放一个 PDF 文件，或者以前流行的 Flash 动画，

object

登录后复制

都能派上用场。

<!-- 嵌入一个PDF文件 -->
<object data="document.pdf" type="application/pdf" width="600" height="400">
    <p>您的浏览器不支持内嵌PDF。请 <a href="document.pdf">点击这里下载</a>。</p>
</object>

<!-- 嵌入一个Flash动画 (现在基本不用了) -->
<object data="animation.swf" type="application/x-shockwave-flash" width="500" height="300">
    <param name="movie" value="animation.swf">
    <param name="quality" value="high">
    <p>您的浏览器不支持Flash。</p>
</object>

登录后复制

而

embed

登录后复制

标签呢，它相对来说就简单粗暴一些。它最初并不是 HTML 规范的一部分，更像是一个 Netscape 浏览器为了嵌入插件内容而创造的“事实标准”。它主要通过

src

登录后复制

属性指定资源路径，

type

登录后复制

指定 MIME 类型。在 Flash 盛行的年代，很多时候你看到的 Flash 嵌入代码里都有它的身影。它没有

object

登录后复制

那么强的参数传递能力，但对于简单的媒体嵌入，也算够用。

<!-- 嵌入一个音频文件 (现在通常用<audio>) -->
<embed src="audio.mp3" type="audio/mpeg" width="300" height="50">

<!-- 嵌入一个Flash动画 (同样，现在基本不用了) -->
<embed src="animation.swf" type="application/x-shockwave-flash" width="500" height="300">

登录后复制

当然，现在我们谈论外部资源嵌入，思路已经非常开阔了。除了这两个历史感比较强的标签，更多的是依赖 HTML5 提供的原生标签，比如

<iframe>

登录后复制

用于嵌入整个网页内容，

<video>

登录后复制

和

<audio>

登录后复制

用于多媒体，

<img>

登录后复制

用于图片，甚至

<link>

登录后复制

和

<script>

登录后复制

也是广义上的外部资源嵌入。这些标签提供了更强大的功能、更好的性能和更高的安全性。

为什么现代网页开发中，

object

登录后复制

和

embed

登录后复制

标签的使用越来越少？

这个问题其实挺有意思的，它背后反映的是整个 Web 技术栈的演进方向。我个人觉得，

object

登录后复制

和

embed

登录后复制

之所以逐渐被边缘化，主要有几个深层原因。

一个很重要的原因是对浏览器插件的依赖性。想想看，它们俩最辉煌的时期，恰好是 Flash、Java Applet 等插件横行的时候。但这些插件本身就带来了很多问题：安全漏洞频发、性能开销大、用户体验差（需要安装、更新插件），而且在移动设备上基本是寸步难行。随着 HTML5 的兴起，浏览器开始原生支持音视频播放（

<video>

登录后复制

和

<audio>

登录后复制

），以及更强大的图形渲染能力（

canvas

登录后复制

、SVG、WebGL），插件的必要性大大降低。苹果当年直接在 iPhone 上拒绝 Flash，可以说给插件的衰落敲响了丧钟。浏览器厂商也纷纷停止了对 NPAPI 等插件接口的支持，这直接宣判了

object

登录后复制

和

embed

登录后复制

在插件领域的“死刑”。

再一个，是安全性和性能的考量。插件运行在浏览器之外的独立进程中，权限控制起来比较复杂，一旦插件有漏洞，整个浏览器甚至操作系统都可能受到威胁。而现代的 Web 标准更注重沙盒化，将不同来源的内容隔离开来，降低风险。性能方面，插件往往比较臃肿，启动慢，占用资源多，这和现代网页追求的快速加载、流畅体验背道而驰。

还有就是标准化和易用性的问题。

embed

登录后复制

标签本身就不是 HTML 规范中的标准成员，虽然被广泛支持，但终归有些“野路子”的感觉。

object

登录后复制

虽然是标准，但它的配置相对复杂，对于开发者来说，学习成本和使用门槛都比直接使用

<img>

登录后复制

、

<video>

登录后复制

这些语义化更强的标签要高。开发者总是倾向于选择更简单、更安全、更高效的工具。

所以，与其说是它们被淘汰了，不如说是 Web 技术发展到了一个新的阶段，有了更优雅、更强大的替代方案。

除了

object

登录后复制

和

embed

登录后复制

，当前主流的外部资源嵌入方式有哪些？

现在我们嵌入外部资源，选择可太多了，而且大多都比

object

登录后复制

和

embed

登录后复制

要好用、安全得多。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

首先，

<iframe>

登录后复制

标签绝对是当之无愧的“万金油”。它能够把一个完整的 HTML 文档嵌入到当前文档中。你可以在里面放一个 YouTube 视频、一个 Google 地图，甚至是一个完全独立的网站。它的强大之处在于，它创建了一个独立的浏览上下文，也就是说，

iframe

登录后复制

内部的内容和外部的文档是相对隔离的，这对于安全性和样式隔离都很有帮助。

<!-- 嵌入一个YouTube视频 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!-- 嵌入一个Google地图 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.254707168936!2d-122.41941558468117!3d37.77492957975878!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858064a33c1f17%3A0x4c2b9b7e7b1a2b1!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

登录后复制

接着，

<video>

登录后复制

和
<audio>
登录后复制
标签是 HTML5 带来的福音，它们彻底改变了网页上的多媒体体验。无需插件，直接在浏览器中播放视频和音频，支持多种格式，还提供了丰富的 JavaScript API 供开发者控制播放。

<!-- 嵌入一个视频 -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <p>您的浏览器不支持HTML5视频。</p>
</video>

<!-- 嵌入一个音频 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>您的浏览器不支持HTML5音频。</p>
</audio>

登录后复制

当然，最基础的

<img>

登录后复制

标签依然是图片嵌入的主力军，它简单、高效。

<img src="image.jpg" alt="一张示例图片" width="300" height="200">

登录后复制

还有

<link>

登录后复制

标签，它主要用于引入外部样式表 (

rel="stylesheet"

登录后复制

)、网站图标 (

rel="icon"

登录后复制

) 等。而<script>
登录后复制
标签则用来引入外部 JavaScript 文件，这是网页动态交互的基石。

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="script.js"></script>

登录后复制

此外，像 SVG (Scalable Vector Graphics) 这种矢量图格式，可以直接嵌入到 HTML 文档中，或者通过

<img>

登录后复制

、

object

登录后复制

标签引用。现代前端框架和库，比如 React、Vue、Angular，也通过组件化的方式，将复杂的第三方 UI 组件或服务（如地图、图表库）以更优雅、更可控的方式嵌入到应用中。

嵌入外部资源时，有哪些重要的安全和性能考量？

嵌入外部资源可不是简单地把标签一放就完事了，尤其是在安全和性能方面，这里面学问可大了。我个人在开发中，对这两块是特别上心的。

先说安全吧。这是重中之重。首先是同源策略（Same-Origin Policy）。这是浏览器的一道重要防线，它限制了来自不同源的文档或脚本之间的交互。比如，你用

<iframe>

登录后复制

嵌入了一个不同域的页面，你的主页面是无法直接访问

iframe

登录后复制

内部的 DOM 内容的，反之亦然。虽然这会带来一些跨域通信的复杂性（通常需要

postMessage

登录后复制

机制），但它极大地保护了用户数据和网站安全。对于

<iframe>

登录后复制

，我们还有

sandbox

登录后复制

属性，这个东西特别有用。它可以为

iframe

登录后复制

内的内容设置一个“沙盒”，限制其执行脚本、提交表单、弹出窗口等能力。如果你嵌入的是一个不完全信任的第三方内容，强烈建议使用

sandbox

登录后复制

，这样即便

iframe

登录后复制

内部的代码有恶意行为，也难以影响到你的主页面。

<!-- 限制所有脚本、表单、弹窗等 -->
<iframe src="untrusted-content.html" sandbox></iframe>
<!-- 允许部分功能，例如允许脚本和同源内容 -->
<iframe src="untrusted-content.html" sandbox="allow-scripts allow-same-origin"></iframe>

登录后复制

还有 Content Security Policy (CSP)，这是一种安全机制，通过 HTTP 响应头或

<meta>

登录后复制

标签来定义哪些外部资源可以被加载和执行。你可以指定只允许从你的域名加载脚本，只允许从特定 CDN 加载图片，等等。这能有效防范跨站脚本攻击 (XSS) 等。

<!-- 在HTML头部设置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src 'self' data:; frame-src https://www.youtube.com">

登录后复制

另外，对于用户隐私，特别是嵌入第三方服务（如社交媒体分享按钮、广告），你需要考虑这些服务是否会追踪用户、收集数据。有时候，为了遵守 GDPR 或其他隐私法规，可能需要用户同意后才能加载这些资源。

再来说说性能。嵌入外部资源，尤其是大型资源，对页面加载速度影响巨大。 懒加载（Lazy Loading）是一个非常实用的技术。对于

<img>

登录后复制

和

<iframe>

登录后复制

标签，我们可以使用

loading="lazy"

登录后复制

属性，告诉浏览器只有当这些元素即将进入视口时才加载它们。这能显著减少初始页面加载时的资源请求，提升用户体验。

<img src="large-image.jpg" alt="大图" loading="lazy">
<iframe src="map.html" loading="lazy"></iframe>

登录后复制

优化资源大小是基本功。视频、音频文件要进行压缩，选择合适的编码格式；图片要优化尺寸、格式和压缩率。PDF 文件也要尽量精简。对于第三方脚本和样式，尽量采用异步加载 (

async

登录后复制

或

defer

登录后复制

属性对于

<script>

登录后复制

)，避免它们阻塞页面的渲染。如果嵌入的资源来自不同的域名，可以考虑使用 dns-prefetch
登录后复制
和
preconnect
登录后复制
等

<link>

登录后复制

属性，提前进行 DNS 解析和 TCP 连接，减少后续资源加载的延迟。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">

登录后复制

最后，别忘了设置明确的尺寸。无论是

<img>

登录后复制

、

<video>

登录后复制

还是

<iframe>

登录后复制

，都应该明确设置

width

登录后复制

和

height

登录后复制

属性。否则，当外部资源加载完成后，如果其尺寸和预留空间不符，就可能导致页面布局跳动（Cumulative Layout Shift, CLS），这可是影响用户体验和 Core Web Vitals 的一个重要指标。

总的来说，嵌入外部资源就像是在你的房子里引入外部装修队，既要方便他们施工，又要确保他们不会把你的房子搞乱，更不能留下安全隐患。谨慎选择，合理配置，才能让你的网页既功能强大又安全高效。

以上就是object和embed标签的作用是什么？外部资源如何嵌入？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

html中embed的作用 html中embed嵌入标签详解 html中embed标签什么意思_embed标签的外部内容嵌入方式 html embed标签怎么用 HTML中embed什么意思？有哪些作用？（附代码） embed播放mp3 如何禁止载入自动播放 type="audio/mp3"_html/css_WEB-ITnose

object和embed标签的作用是什么？外部资源如何嵌入？

解决方案

为什么现代网页开发中，
object
登录后复制
和
embed
登录后复制
标签的使用越来越少？

除了
object
登录后复制
和
embed
登录后复制
，当前主流的外部资源嵌入方式有哪些？

嵌入外部资源时，有哪些重要的安全和性能考量？

大家都在看：

object和embed标签的作用是什么？外部资源如何嵌入？

解决方案

为什么现代网页开发中，object登录后复制 和 embed登录后复制 标签的使用越来越少？

除了 object登录后复制 和 embed登录后复制，当前主流的外部资源嵌入方式有哪些？

嵌入外部资源时，有哪些重要的安全和性能考量？

大家都在看：

为什么现代网页开发中，
object
登录后复制
和
embed
登录后复制
标签的使用越来越少？

除了
object
登录后复制
和
embed
登录后复制
，当前主流的外部资源嵌入方式有哪些？