object和embed标签因依赖不安全、性能差的浏览器插件（如flash）而逐渐被淘汰；2. 现代替代方案包括语义化更强、原生支持的html5标签，如嵌入网页、
object
和
embed
标签在 HTML 中扮演着嵌入外部非 HTML 内容的角色，你可以把它们想象成网页上的一个“窗口”，用来展示一些浏览器本身不直接渲染的文件格式，比如早期的 Flash 动画、Java 小程序、PDF 文档，甚至是音视频文件。而“外部资源如何嵌入”这个大问题，其实远不止这两个标签，它涵盖了从最基本的图片、音视频，到复杂的第三方应用、整个网页等多种形式，核心就是通过特定的 HTML 标签和属性，告诉浏览器去哪里获取这些资源，以及如何展示它们。
解决方案
说到
object
和
embed
标签，它们在 HTML 的发展历程中，确实是扮演过重要角色的。
object
标签是一个非常通用的嵌入容器，它设计的初衷就是为了能处理各种各样的外部对象，不仅仅是多媒体，甚至可以是 ActiveX 控件或者其他浏览器插件才能识别的内容。它的灵活性在于可以通过
data
属性指定资源的 URL，
type
属性指定 MIME 类型，然后通过嵌套
标签来传递参数给嵌入的对象。比如说，你想在网页里放一个 PDF 文件，或者以前流行的 Flash 动画，
object
都能派上用场。
而
embed
标签呢，它相对来说就简单粗暴一些。它最初并不是 HTML 规范的一部分，更像是一个 Netscape 浏览器为了嵌入插件内容而创造的“事实标准”。它主要通过
src
属性指定资源路径，
type
指定 MIME 类型。在 Flash 盛行的年代，很多时候你看到的 Flash 嵌入代码里都有它的身影。它没有
object
那么强的参数传递能力，但对于简单的媒体嵌入，也算够用。
<!-- 嵌入一个音频文件 (现在通常用
当然，现在我们谈论外部资源嵌入，思路已经非常开阔了。除了这两个历史感比较强的标签，更多的是依赖 HTML5 提供的原生标签，比如
用于嵌入整个网页内容，
和
用于多媒体，
@@##@@
用于图片，甚至
和
也是广义上的外部资源嵌入。这些标签提供了更强大的功能、更好的性能和更高的安全性。
为什么现代网页开发中，
object
object
和
embed
标签的使用越来越少？
这个问题其实挺有意思的，它背后反映的是整个 Web 技术栈的演进方向。我个人觉得，
object
和
embed
之所以逐渐被边缘化，主要有几个深层原因。
一个很重要的原因是对浏览器插件的依赖性。想想看，它们俩最辉煌的时期，恰好是 Flash、Java Applet 等插件横行的时候。但这些插件本身就带来了很多问题：安全漏洞频发、性能开销大、用户体验差（需要安装、更新插件），而且在移动设备上基本是寸步难行。随着 HTML5 的兴起，浏览器开始原生支持音视频播放（
和
），以及更强大的图形渲染能力（
canvas
、SVG、WebGL），插件的必要性大大降低。苹果当年直接在 iPhone 上拒绝 Flash，可以说给插件的衰落敲响了丧钟。浏览器厂商也纷纷停止了对 NPAPI 等插件接口的支持，这直接宣判了
object
和
embed
在插件领域的“死刑”。
再一个，是安全性和性能的考量。插件运行在浏览器之外的独立进程中，权限控制起来比较复杂，一旦插件有漏洞，整个浏览器甚至操作系统都可能受到威胁。而现代的 Web 标准更注重沙盒化，将不同来源的内容隔离开来，降低风险。性能方面，插件往往比较臃肿，启动慢，占用资源多，这和现代网页追求的快速加载、流畅体验背道而驰。
还有就是标准化和易用性的问题。
embed
标签本身就不是 HTML 规范中的标准成员，虽然被广泛支持，但终归有些“野路子”的感觉。
object
虽然是标准，但它的配置相对复杂，对于开发者来说，学习成本和使用门槛都比直接使用
@@##@@
、
这些语义化更强的标签要高。开发者总是倾向于选择更简单、更安全、更高效的工具。
所以，与其说是它们被淘汰了，不如说是 Web 技术发展到了一个新的阶段，有了更优雅、更强大的替代方案。
除了
object
object
和
embed
，当前主流的外部资源嵌入方式有哪些？
现在我们嵌入外部资源，选择可太多了，而且大多都比
object
和
embed
要好用、安全得多。
首先，
标签绝对是当之无愧的“万金油”。它能够把一个完整的 HTML 文档嵌入到当前文档中。你可以在里面放一个 YouTube 视频、一个 Google 地图，甚至是一个完全独立的网站。它的强大之处在于，它创建了一个独立的浏览上下文，也就是说，
iframe
内部的内容和外部的文档是相对隔离的，这对于安全性和样式隔离都很有帮助。
接着，
和
标签是 HTML5 带来的福音，它们彻底改变了网页上的多媒体体验。无需插件，直接在浏览器中播放视频和音频，支持多种格式，还提供了丰富的 JavaScript API 供开发者控制播放。
当然，最基础的
@@##@@
标签依然是图片嵌入的主力军，它简单、高效。
@@##@@
还有
标签，它主要用于引入外部样式表 (
rel="stylesheet"
)、网站图标 (
rel="icon"
) 等。而
标签则用来引入外部 JavaScript 文件，这是网页动态交互的基石。
此外，像 SVG (Scalable Vector Graphics) 这种矢量图格式，可以直接嵌入到 HTML 文档中，或者通过
@@##@@
、
object
标签引用。现代前端框架和库，比如 React、Vue、Angular，也通过组件化的方式，将复杂的第三方 UI 组件或服务（如地图、图表库）以更优雅、更可控的方式嵌入到应用中。
嵌入外部资源时，有哪些重要的安全和性能考量？
嵌入外部资源可不是简单地把标签一放就完事了，尤其是在安全和性能方面，这里面学问可大了。我个人在开发中，对这两块是特别上心的。
先说安全吧。这是重中之重。首先是同源策略（Same-Origin Policy）。这是浏览器的一道重要防线，它限制了来自不同源的文档或脚本之间的交互。比如，你用
嵌入了一个不同域的页面，你的主页面是无法直接访问
iframe
内部的 DOM 内容的，反之亦然。虽然这会带来一些跨域通信的复杂性（通常需要
postMessage
机制），但它极大地保护了用户数据和网站安全。对于
，我们还有
sandbox
属性，这个东西特别有用。它可以为
iframe
内的内容设置一个“沙盒”，限制其执行脚本、提交表单、弹出窗口等能力。如果你嵌入的是一个不完全信任的第三方内容，强烈建议使用
sandbox
，这样即便
iframe
内部的代码有恶意行为，也难以影响到你的主页面。
还有 Content Security Policy (CSP)，这是一种安全机制，通过 HTTP 响应头或
标签来定义哪些外部资源可以被加载和执行。你可以指定只允许从你的域名加载脚本，只允许从特定 CDN 加载图片，等等。这能有效防范跨站脚本攻击 (XSS) 等。
另外，对于用户隐私，特别是嵌入第三方服务（如社交媒体分享按钮、广告），你需要考虑这些服务是否会追踪用户、收集数据。有时候，为了遵守 GDPR 或其他隐私法规，可能需要用户同意后才能加载这些资源。
再来说说性能。嵌入外部资源，尤其是大型资源，对页面加载速度影响巨大。懒加载（Lazy Loading）是一个非常实用的技术。对于
@@##@@
和
标签，我们可以使用
loading="lazy"
属性，告诉浏览器只有当这些元素即将进入视口时才加载它们。这能显著减少初始页面加载时的资源请求，提升用户体验。
@@##@@
优化资源大小是基本功。视频、音频文件要进行压缩，选择合适的编码格式；图片要优化尺寸、格式和压缩率。PDF 文件也要尽量精简。对于第三方脚本和样式，尽量采用异步加载 (
async
或
defer
属性对于
)，避免它们阻塞页面的渲染。如果嵌入的资源来自不同的域名，可以考虑使用
dns-prefetch
和
preconnect
等
属性，提前进行 DNS 解析和 TCP 连接，减少后续资源加载的延迟。
最后，别忘了设置明确的尺寸。无论是
@@##@@
、
还是
，都应该明确设置
width
和
height
属性。否则，当外部资源加载完成后，如果其尺寸和预留空间不符，就可能导致页面布局跳动（Cumulative Layout Shift, CLS），这可是影响用户体验和 Core Web Vitals 的一个重要指标。
总的来说，嵌入外部资源就像是在你的房子里引入外部装修队，既要方便他们施工，又要确保他们不会把你的房子搞乱，更不能留下安全隐患。谨慎选择，合理配置，才能让你的网页既功能强大又安全高效。
以上就是object和embed标签的作用是什么？外部资源如何嵌入？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1570301.html
微信扫一扫 
支付宝扫一扫 
