如果您想在您的网站上嵌入视频或音频等外部内容,内嵌框架 (iframe) 已被证明对此非常有用。 标签提供了一种简单而优雅的解决方案来容纳 HTML 文档中的外部内容。 通常,网站访问者甚至不会注意到他们正在查看外部内容。 但是如何添加 iframe 呢?
iframe 标签是做什么用的?
通常,网站是一个 HTML 文档。 要插入其他元素,必须使用一个框架,以便轻松嵌入文档、图像甚至视频。 过去,这是通过使用普通的 HTML 框架来解决的,但现在已经不再使用了。 相反,iframe 标签已成为嵌入第三方内容的流行选择。 iframe 中的内容是分开的,这意味着它是单独加载的,并且可以独立于网站的其余部分进行导航。
这就是为什么使用内联框架来集成来自其他网站(例如 YouTube 视频或百度地图)的内容和组件的原因之一。 甚至社交媒体插件或特定应用程序也可以通过 iframe 以及 HTML 文档进行整合。
内嵌框架的结构
内嵌框架是通过 iframe 标签在 HTML 代码中创建的。
<iframe>...</iframe>
为了正确填写框架,您需要指定以下属性:
src:嵌入内容的来源,以 URL 形式指定。
width:框架的宽度,可以以像素或百分比指定。
height:框架的高度,可以以像素或百分比指定。
name:特定 iframe 的名称。
sandbox:连接内联框架与特定的安全措施。
srcdoc:包含要在 iframe 中显示的 HTML 代码。
还有一些其他属性,其中许多已经过时并且自 HTML5 以来就不再受支持。 如果你想进一步指定外部内容,你应该为这些功能求助于 CSS 解决方案。
scrolling:内嵌框架是否应该单独滚动?
align:框架的对齐方式是什么?
frameborder:框架边框应该透明吗?
longdesc:框架的详细描述。
marginwidth:左右边距的宽度。
marginheight:上下边距的宽度。
vspace:iframe 周围的垂直空间。
iframe 的实际内容及其部分结构只能通过使用这些属性来安排。 标记括号内一般没有内容。 此空间用于容纳替代文本。 在浏览器不加载 iframe 的地方,将显示 iframe 的文本。 然而,如今这种情况很少见。 所有流行的浏览器,如 Chrome、Firefox 和 Safari 都可以显示 iframe 内容。
iframe 如何工作?
iframe(内嵌框架)是HTML文档中的一个标签,可以将另一个网页嵌入到当前网页中。它的工作原理如下:
当浏览器加载包含 iframe 标签的 html 页面时,会根据 iframe 标签的 src 属性指定的网址,向该网址发送请求。
服务器接收请求后,会返回网页的 HTML、CSS 和 JS 文件等资源。
浏览器会根据服务器返回的内容,将 iframe 中的 src 指向的网页渲染出来,并将其嵌入到包含 iframe 标签的页面中。
这样用户就可以在当前网页中看到嵌入的网页内容,而且可以通过父窗口和子窗口之间的通信,实现一些特殊的功能。
需要注意的是,由于 iframe 可以嵌入任何网页,因此也会带来一定的安全风险,如恶意代码注入等问题。因此,在使用 iframe 的过程中,应谨慎考虑安全性和隐私问题。
一个有效的 iframe 通常是这样的:
<iframe src="https://aww255.net/" height="400" width="800" name="demo"> <p>您的浏览器不支持 iframe!</p> </iframe>
在此示例中,代码指向另一个网站上的 HTML 文档。 可以使用 iframe 标签合并位于网络服务器上的 HTML 文档。 在这种情况下,您只需添加文件名,可能还有所需文档位置的路径。
提示
如果您想在您的网站上嵌入 YouTube 视频,您可以使用内嵌框架。 视频平台在相关视频的页面上为此提供了相应的代码。
为了以一种吸引人的方式创建 iframe,必须使用 CSS。 在大多数情况下,这只会创建框架本身。 如果内容来自外部来源,您很少可以自定义要在您自己的网站上显示的内容。 通过一些 CSS 技巧,可以将 iframe 集成到响应式网页设计中。
iframe 的优缺点
如果您想将来自外部资源的元素嵌入到您自己的站点中,则内嵌框架很有用。 他们可以继续浏览该网站,而不是将用户转到另一个域。 结果,用户友好性大大提高。 此外,集成具有一些技术优势。 iframe 的内容独立于网站的其余内容加载。 这样,内容对用户可用,即使其他页面元素尚未加载。
实际上,内嵌框架正变得越来越不重要,因为该方法存在缺陷。 例如,它没有适当地处理来自搜索引擎的嵌入元素。 这会影响搜索引擎优化,从而影响网站的排名。 与 iframe 相关的安全风险更受关注。 如果您嵌入外部内容,可能会损害您的系统。 例如,iframe 中的内容可能包含有害插件,或者网站所有者可能在没有意识到的情况下成为网络钓鱼攻击的受害者。
随着数据保护成为网站所有者和用户日益关注的问题,iframe 引起了激烈的争论。 内嵌框架通常用于收集用户数据的社交媒体插件,即使网站访问者没有与“喜欢”或“分享”按钮进行交互或者是注册用户也是如此。
-
Python 实现一个简单的中文分词处理?
-
有趣的CSS - 多彩变化的按钮
-
让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过
- Windows 11 上应禁用的 15 项功能
- 编译原理总结(《编译与反编译技术》)
- VB窗体初始最大化和改变窗体大小自动缩放控件及字体
- H.266编码和H.264 H.265编码有什么区别
- 带您快速了解开源/自由软件的历史
- 当前操作系统缺少OCR A Extended等字体,请及时安装所需字体或者重新安装正版操作系统软件,黑体 解决方法
- MySQL 和 MongoDB:如何选择合适的数据库解决方案?
- 了解 iframe 内嵌框架:深度解析其工作原理
- HTML前端复制指定标签中的文字-完整代码
- 栏目导航
- 最新文章
-
-
Python 实现一个简单的中文分词处理?
在Python中,实现一个简单的中文分词处理,我们可以采用基于规则的方法,比如最大匹配法、最小匹配法、双向匹配法等。但更...
-
有趣的CSS - 多彩变化的按钮
这个按钮效果主要使用 :hover 、:active 伪选择器以及 animat...
-
让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过
以下内容有不妥之处,敬请指正。一、查看当前电脑登录的用户名称按下键盘上的Win+R组合键,打开运行对话框。输入cmd并按...
-
Windows 11 上应禁用的 15 项功能
Windows11具有大量特性和功能,可满足广泛的用户需求。然而,并非所有这些功能都是普遍必要或理想的。 ...
-
编译原理总结(《编译与反编译技术》)
编译原理总结(《编译与反编译技术》)转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
-
- 热门文章
-
-
当前操作系统缺少OCR A Extended等字体,请及时安装所需字体或者重新安装正版操作系统软件,黑体 解决方法
安装的航天信息开票软件无法打印,提示”“当前操作系统缺少OCRAExtended等字体…”,具体解决方法如下:打印发...
-
带您快速了解开源/自由软件的历史
自由软件运动于1983年发起,但较早的项目符合...
-
H.266编码和H.264 H.265编码有什么区别
相信经常看视频的朋友应该都听说过H.264/AVC、H.265/HEVC这类词语,其实这是视频编码标准,主要作用是将视频...
-
编译原理总结(《编译与反编译技术》)
编译原理总结(《编译与反编译技术》)转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
-
VB窗体初始最大化和改变窗体大小自动缩放控件及字体
1、模块代码:'标准模块声明写入(自定义类型)Type cp  ...
-
- 最近发表
-
- 柯美 柯尼卡美能达 bizhub 250 350现场维修手册V1.0
- 爱普生 英文L1800维修手册新版2024(新增代码释义)SEIJ13-007
- 三星英文V1.3维修手册Samsung_ProXpress_M3370 M3375 M3870 M3875 M4070
- 柯美 柯尼卡美能达 bizhub PRO 950 复印机现场维修手册+操作原理手册
- 柯美 柯尼卡美能达 bizhub PRO 1100 工程复印机中文维修手册
- 柯美 柯尼卡美能达 bizhub PRO 1050_1050P复印机中文维修手册
- 柯美 柯尼卡美能达 bizhub PRESS C1100 C1085 彩色复印机中文维修手册
- 柯美 bizhub PRESS C1060_C1060L_C1070_C1070P复印机中文维修手册
- 柯美 bizhub PRESS 1250 1250P 1052 PRO 951 生产型复印机中文维修手册
- 柯美 柯尼卡美能达 bizhub C759 C659 彩色复印机中文维修手册
-
国产硒鼓(1)Blocker(1)解锁程序(1)下载(1)字体(1)C2253(1)搜索工具(1)施乐2022(1)我的治愈系游戏(1)一念永恒(1)桐华(1)恢复程序(1)合集(1)尼康(1)修仙(1)打印系统(1)有声剧(1)搓纸轮(1)载体(1)视频教程(1)PS笔刷(1)张震(1)农村(1)M254dn(1)MySQL(1)建筑工程(1)HitPaw(1)维修召唤M2(1)Portable(1)插件(1)图解教程(1)埃隆(1)H5-01故障(1)西游记(1)内嵌框架(1)XP-240(1)SL机型报(1)LQ630KII(1)YT(1)管理密码(1)H.264(1)WPS(1)围棋教程大全(0)海康威视(1)中醫診斷學(1)贝瓦儿歌(1)Watermark(1)精修磨皮(1)拆解视频(1)儿童(1)
发表评论 已有 1 评论