【HTML】学会＜iframe＞框架，你就可以把所有网页集中放在一个网页里

最新推荐文章于 2025-04-25 21:22:01 发布

黑口罩

最新推荐文章于 2025-04-25 21:22:01 发布

阅读量517

点赞数 5

分类专栏： # 【HTML】系列文章标签： html 开发语言前端

本文链接：https://blog.youkuaiyun.com/xudahai513/article/details/145029525

版权

【HTML】系列专栏收录该内容

6 篇文章

订阅专栏

定义

<iframe>是 HTML 中的内联框架（Inline Frame）元素。它用于在一个 HTML 文档中嵌入另一个 HTML 文档。一个 HTML 里面可以创建多个 iframe 。

（您可以本地创建一个.txt 文件然后把后缀改为 .html；复制我代码，就可以用浏览器打开了）

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

    <!-- 点击a标签 指向（target="myIframe"）刚刚创建的 iframe -->
    <a href="https://blog.youkuaiyun.com/xudahai513?type=blog" target="myIframe">让 iframe 显示的博客主页</a>
    <hr>

    <a href="https://blog.youkuaiyun.com/xudahai513/category_8929649.html" target="myIframe">让 iframe 显示 java 系列</a>

    <hr>
    <!-- 点iframe 宽度1300像素，高度800像素，名称叫  myIframe-->
    <!-- src 默认显示的网址，可以随您喜欢，可以创建多个iframe，您可以自己尝试-->
    <iframe src="www.baidu.com" width="1300px" height="800px" name="myIframe"></iframe>

 </body>
</html>

点击文字显示如下：

iframe 的所有属性

frameborder：

控制 iframe 是否显示边框，0 表示不显示边框，1 表示显示边框。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" frameborder="0"></iframe>

scrolling：

控制 iframe 内是否显示滚动条，可取值为 yes（显示滚动条）、no（不显示滚动条）或 auto（根据内容自动显示滚动条）。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" scrolling="no"></iframe>

sandbox：

对 iframe 中的内容应用额外的限制，以提高安全性。可以包含多个关键字，用空格分隔，如 allow-scripts（允许执行脚本）、allow-same-origin（允许同域资源）、allow-top-navigation（允许 iframe 中的页面导航到顶级页面）等。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" sandbox="allow-scripts allow-same-origin"></iframe>

allowfullscreen：

布尔属性，允许 iframe 中的内容全屏显示。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" allowfullscreen></iframe>

allow：

定义 iframe 中允许的功能，如 accelerometer（加速计）、camera（摄像头）、geolocation（地理位置）等。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" allow="accelerometer; camera; geolocation"></iframe>

loading：

控制 iframe 的加载行为，可取值为 eager（立即加载）或 lazy（延迟加载）。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" loading="lazy"></iframe>

referrerpolicy：

控制发送给 iframe 页面的 Referrer 信息，例如 no-referrer（不发送）、origin（仅发送源信息）等。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" referrerpolicy="no-referrer"></iframe>

longdesc：

提供一个指向长描述的 URL，用于描述 iframe 的内容，主要用于辅助技术，如屏幕阅读器。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" longdesc="https://blog.youkuaiyun.com/xudahai513?type=blog"></iframe>

marginwidth：

设置 iframe 左右边距的宽度，单位为像素。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" marginwidth="10"></iframe>

marginheight：

设置 iframe 上下边距的高度，单位为像素。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" marginheight="10"></iframe>

csp：

允许为 iframe 单独设置内容安全策略，是一个实验性属性，目前仅在部分浏览器中支持。

<iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" csp="default-src 'self'; script-src 'self' https://trusted-cdn.com;"></iframe>