什么是 HTML 框架？
HTML 框架允许在一个网页中同时显示多个 HTML 文档，通过将浏览器窗口分割成不同的部分，每部分加载不同的网页内容。
HTML 框架通过<iframe>标签来实现，全称是 Inline Frame，中文可以理解为“内嵌框架”。
iframe 基本用法
使用<iframe>非常简单，只需要在 HTML 代码中插入<iframe>标签，并设置一些属性即可。
下面是一个简单的例子：
<iframe src="https://www.kaicz.com" width="600" height="400"></iframe>- src属性：指定了你要嵌入的 URL 地址，从而将 URL 指向的网页呈现出来。
- width和width属性：这两个属性分别设置了 iframe 的宽度和高度。
iframe 常见属性
除了src、width和height，iframe 还有一些其他常用的属性：
1. allowfullscreen：这个属性允许 iframe 中的内容全屏显示。通常用于嵌入视频等媒体内容。
<iframe src="https://www.kaicz.com" width="600" height="400" allowfullscreen></iframe>2. sandbox：这个属性用于增强 iframe 的安全性，限制嵌入网页的行为。比如禁止脚本执行、禁止表单提交等。
<iframe src="https://www.kaicz.com" width="600" height="400" sandbox="allow-scripts"></iframe>以上代码使用了sandbox="allow-scripts"表示只允许执行脚本。sandbox常见属性值有：
- allow-forms：允许嵌入内容提交表单。
- allow-modals：允许嵌入内容打开模态窗口（如 alert、confirm）。
- allow-orientation-lock：允许嵌入内容锁定屏幕方向。
- allow-pointer-lock：允许嵌入内容使用 Pointer Lock API。
- allow-popups：允许嵌入内容打开新窗口或标签页。
- allow-popups-to-escape-sandbox：允许弹出窗口不受沙盒限制。
- allow-presentation：允许嵌入内容启动演示模式（如投影）。
- allow-same-origin：允许嵌入内容被视为同源，保留同源权限。
- allow-scripts：允许嵌入内容运行脚本，但不允许创建弹出窗口。
- allow-storage-access-by-user-activation：允许嵌入内容在用户交互下访问存储（如 cookies）。
- allow-top-navigation：允许嵌入内容导航顶级窗口。
- allow-top-navigation-by-user-activation：允许在用户交互下导航顶级窗口。
- allow-downloads：允许嵌入内容触发下载。
iframe CSS样式
虽然 iframe 有一些内置的属性可以控制样式，但在现代网页开发中，更推荐使用 CSS 来控制 iframe 的外观。
比如，你可以通过 CSS 设置 iframe 的边框、边距、背景颜色等。
<style>
iframe {
border: 2px solid #ccc;
border-radius: 10px;
margin: 20px;
background-color: #f9f9f9;
}
</style>
<iframe src="https://www.kaicz.com" width="600" height="400"></iframe>iframe 的优缺点
优点- 嵌入外部内容：iframe 可以轻松嵌入其他网页或第三方内容，比如地图、视频、社交媒体插件等。
- 隔离作用：iframe 中的内容与主页面是隔离的，这意味着嵌入的内容不会影响主页面的样式和脚本。
- 并行加载：iframe 中的内容可以与主页面并行加载，提升页面加载速度。
- SEO 不友好：搜索引擎通常不会抓取 iframe 中的内容。
- 安全性问题：如果嵌入的内容来自不可信的来源，可能会带来安全风险，比如跨站脚本攻击（XSS）。
- 响应式设计问题：iframe 的尺寸是固定的，如果不做特殊处理，可能在小屏幕设备上显示不佳。
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
204
阅读
0
评论