学习笔记（九）从对象到iframe - 其他嵌入技术

最新推荐文章于 2024-02-03 00:00:00 发布

qq_41008787

最新推荐文章于 2024-02-03 00:00:00 发布

阅读量171

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_41008787/article/details/115953148

版权

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文回顾了网页内容嵌入技术的发展，从早期的框架（frameset）到JavaApplet和Flash，再到现今广泛使用的<iframe>。<iframe>元素允许整个网页嵌入，而<embed>和<object>曾用于嵌入丰富媒体内容，但现在已逐渐过时。现代网页更倾向于使用HTML5元素如<video>和<canvas>。安全性、可访问性和加载速度是选择嵌入技术的重要考量因素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌入的简史

很久以前，很流行在网络上使用框架创建网站 — 网站的一小部分存储于单独的HTML页面中。这些被嵌入在一个称为框架集的主文档中，它允许您指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。这些做法在90年代中期至90年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度 —尤其是在那时网络连接速度太慢的情况下更为明显。然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。

一小段时间之后（20世纪90年代末，21世纪初），插件技术变得非常受欢迎，例如Java Applet和Flash — 这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过HTML单独实现。嵌入这些技术是通过诸如**<object>和较少使用<embed>的元素来实现的**，当时它们非常有用。由于许多问题，包括可访问性、安全性、文件大小等，它们已经过时了; 如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。

最后，<iframe>元素出现了（连同其他嵌入内容的方式，如<canvas>，<video>等），它提供了一种将整个web页嵌入到另一个网页的方法，看起来就像那个web页是另一个网页的一个<img>或其他元素一样。<iframe>现在经常被使用。

<iframe>

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

此示例包括使用以下所需的<iframe>基本要素：

allowfullscreen
如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。

frameborder
如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

src
该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。

width 和 height
这些属性指定您想要的iframe的宽度和高度。

备选内容
与<video>等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。

sandbox
该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置; 我们将在下一节中更加详细地谈到。

**注意：**为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。

<embed>和<object>元素

然而，您不太可能使用这些元素 - Applet几年来一直没有被使用；由于许多原因，Flash不再受欢迎（见下面的插件案例）；PDF更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防您在某些情况下遇到问题，比如内部网或企业项目等。

	<embed>	<object>
嵌入内容的网址	src	data
嵌入内容的准确媒体类型	type	type
由插件控制的框的高度和宽度（以CSS像素为单位）	height width	height width
名称和值，将插件作为参数提供	具有这些名称和值的ad hoc属性	单标签<param>元素，包含在内<object>
独立的HTML内容作为不可用资源的回退	不支持（<noembed>已过时）	包含在元素<object>之后<param>