除了将图像、视频和音频嵌入到网页上,还能让你在网页中嵌入各种内容类型的元素:<iframe>, <embed> 和 <object> 元素。
<iframe>用于嵌入其他网页,另外两个元素则允许你嵌入 PDF,SVG,甚至 Flash。(Flash被HTML5取代)
Adobe于2020年12月31日宣布停止更新Flash Player。
微软在2019年宣布计划从所有的浏览器中移除Flash(Windows 10中也进行了相应的屏蔽),苹果也宣布将在2020年早些时候从自家浏览器中移除Flash。
Flash的功能:
开发游戏、看视频、实现交互效果。
Flash被取代的原因:
- 移动互联网时代,网速不断提升、性能越来越强。以小而精著称的Flash对移动互联网络的兼容适配不足,导致,不能高效处理图片、视频、游戏,表现力不足、效率低下;
- 由于Flash在网页浏览器中的普遍应用,让不法分子得以凭借Flash制作、传播木马病毒,增大安全风险,各类弹窗广告甚至一些恶意软件,也让Flash的声誉日渐式微。
一、<iframe>元素
<iframe> 提供了一种将整个 web 页嵌入到另一个网页的方法,看起来就像那个 web 页是另一个网页的一个 <img> 或其他元素一样。这很适合将第三方内容嵌入你的网站。
让我们来看看 Bilibili 如何让我们通过 <iframe> 在页面中嵌入喜欢的视频:
选择“嵌入代码”选项,会出现“成功复制到剪贴板”的提示。将复制的代码粘贴到下面的输入框里,可以看到复制的内容如下:
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&p=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
同理,我们也可以在网页中嵌入地图。
示例:
<iframe
src="https://www.runoob.com"
width="100%"
height="500"
frameborder="0"
allowfullscreen
sandbox>
<p>
<a src="http://www.baidu.com">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>
文章来源:https://www.toymoban.com/news/detail-820055.html
1-1、<iframe>的基本属性
1、allowfullscreen
如果设置,<iframe>则可以通过全屏 API 设置为全屏模式。
2、frameborder
如果设置为 1,则会告诉浏览器在此框架和其他框架之间绘制边框,这是默认行为。
0 删除边框。
不推荐这样设置,因为在 CSS 中可以更好地实现相同的效果。border: none;
3、src
该属性指向要嵌入文档的 URL 路径。
4、width 和 height
这些属性指定你想要的 iframe 的宽度和高度。
5、备选内容
与 <video> 等其他类似元素相同,你可以在 <iframe></iframe> 标签之间包含备选内容,如果浏览器不支持 <iframe>,将会显示备选内容。
7、sandbox
该属性需要在已经支持其他 <iframe> 功能(例如 IE 10 及更高版本)但稍微更现代的浏览器上才能工作,该属性可以提高安全性设置。
8、scrolling
值:yes、no、auto,HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
9、align
值:left、right、top、middle、bottom;HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。
10、name
规定 <iframe> 的名称。
示例:
<iframe src="" name="helloFrame">
</iframe>
<a href="TEST.html" target="helloFrame">点击跳转</a>
<a>标签的target属性的值就是 <iframe>标签的name属性的值。
点击<a>标签的内容,跳转的页面将在<iframe>框架中展示。
1-2、<iframe>的安全隐患
安全隐患:
如果黑客试图恶意修改你的网页,或欺骗人们进行不想做的事情时常把 iframe 作为共同的攻击目标(官方术语:攻击向量)。规范工程师和浏览器开发人员已经开发了各种安全机制,使得<iframe>更加安全。
点击劫持:一种常见的 iframe 攻击,实际上是一种视觉上的欺骗手段,攻击者通过利用一个透明的、不可见的iframe,覆盖在某网页上,然后诱导用户在该网页上进行点击等操作,而此时用户在不知情的情况下点击了透明的iframe页面。
如下:
<iframe
src="https://developer.mozilla.org/zh-CN/docs/Glossary"
width="100%"
height="500"
frameborder="0"
allowfullscreen
sandbox>
<p>
<a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>
想在其中一个网页上加入 MDN 词汇表,但是浏览器无法加载。
这是因为构建 MDN 的开发人员已经在网站页面的服务器上设置了一个不允许被嵌入到
<iframe>
的设置。
解决方式:
1、使用HTTPS
HTTPS是HTTP的加密版本。
- HTTPS 减少了远程内容在传输过程中被篡改的机会,
- HTTPS 防止嵌入式内容访问你的父文档中的内容,反之亦然。
使用 HTTPS 需要一个安全证书,花费。
2、始终使用sandbox属性
想尽可能减少攻击者在你的网站上做坏事的机会,那么应该给嵌入的内容仅能完成自己工作的权限。
一个允许包含在其里的代码以适当的方式执行或者用于测试,但不能对其他代码库(意外或恶意)造成任何损害的容器称为沙盒。
使用没有参数的 sandbox属性来强制执行所有可用的限制 。
如果绝对需要,你可以逐个添加权限(
sandbox=""
属性值内)
二、<embed>和<object>元素
<embed> 和 <object> 元素的功能不同于 <iframe>。
这些元素是用来嵌入多种类型的外部内容的通用嵌入工具,其中包括像 Java 小程序和 Flash,PDF(可在浏览器中显示为一个 PDF 插件)这样的插件技术,甚至像视频,SVG 和图像的内容!
插件:对浏览器原生无法读取的内容提供访问权限的软件。
插件和这些嵌入方法真的是一种传统技术,使用场景不多。对于大多数应用程序,现在是停止依赖插件传播内容,开始利用 Web 技术的时候了。
三、在网页中添加矢量图形
矢量图形在很多情况下非常有用 — 它们拥有较小的文件尺寸,却高度可缩放,所以它们不会在镜头拉近或者放大图像时像素化。
3-1、什么是矢量图
在网上,你会和两种类型的图片打交道 — 位图和矢量图。
3-1-1、位图
位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。
流行的位图格式包括 Bitmap (.bmp
), PNG (.png
), JPEG (.jpg
), and GIF (.gif
.)
3-1-2、矢量图
图片方法依旧清晰。因为无论它的尺寸如何,都使用算法来计算出图像的形状,仅仅是根据放大的倍数来调整算法中的值。
此外,矢量图形相较于同样的位图,通常拥有更小的体积,因为它们仅需储存少量的算法,而不是逐个储存每个像素的信息。
3-2、SVG是什么?
SVG是用于描述矢量图的XML语言。类似于HTML语言,也是标记语言。用于标记图形,而不是内容
有许多不同的元素来定义要显示在图像中的形状,以及要应用于这些形状的效果。
示例:创建一个圆和一个矩形
<svg
version="1.1"
baseProfile="full"
width="300"
height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
3-3、将SVG添加到页面
3-3-1、快捷方式<img>
示例:
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87px"
width="100px" />
3-3-2、SVG 内联
在文本编辑器中打开 SVG 文件,复制 SVG 代码,并将其粘贴到 HTML 文档中。
确保你的 SVG 代码在<svg></svg>标签中。
3-3-3、使用<iframe>嵌入SVG
示例:文章来源地址https://www.toymoban.com/news/detail-820055.html
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
到了这里,关于HTML学习笔记——07:其他嵌入技术的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!