内联框架属性
![](https://i-blog.csdnimg.cn/blog_migrate/05e3c7f271bee59953f98b0fc1ac93ac.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e5f98700e7cbf4329d110461fcc2ff67.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<iframe src="Demo.html">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
<!--
内联框架:iframe
src:指定 iframe 内嵌文档的 URL
-->
-
width和height:设置iframe 宽度和高度
![](https://i-blog.csdnimg.cn/blog_migrate/78cdfdd98e6274aaf5a3aae8d5fccbaa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2a99edcd0a13e9ccb5bc178400f37e7c.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<iframe src="Demo.html" width="200px" height="200px">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
<!--
内联框架:iframe
src:指定 iframe 内嵌文档的 URL
width:宽度
height:高度
-->
-
frameborder:删除iframe边框,1:有边框,0:删除边框
![](https://i-blog.csdnimg.cn/blog_migrate/3e2cb7e5a43c3381028cfdb9c348c15c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e608e26b3965f62ee8ad57cb68b05ab6.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<iframe src="Demo.html" width="200px" height="200px" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
<!--
内联框架:iframe
src:指定 iframe 内嵌文档的 URL
width:宽度
height:高度
frameborder:删除边框
-->
![](https://i-blog.csdnimg.cn/blog_migrate/f857380454c9c7dd4a614aafc91cd2a3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9d7156be09298d76168020ffa63cceed.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<iframe src="" width="200px" height="200px" frameborder="0" name="iframe_a">
<p>Your browser does not support iframes.</p>
</iframe>
<p><a href="Demo.html" target="iframe_a">Jump to Demo.html</a></p>
</body>
</html>
<!--
内联框架:iframe
src:指定 iframe 内嵌文档的 URL
width:宽度
height:高度
frameborder:删除边框
name:指定 iframe 内嵌文档的名称
-->
注意!
- srcdoc: 允许你直接在 iframe 属性中提供 HTML 内容,而不是从 URL 获取。
- title: 提供 iframe 内容的标题,有助于提高可访问性。
- sandbox: 限制 iframe 内的行为,提供额外的安全措施
- scrolling:yes/no/auto:控制 iframe 是否显示滚动条
- seamless: iframe 内的内容看起来像是它所在页面的一部分。
- aria-label: 提供 iframe 的无障碍标签。
- aria-labelledby: 引用一个元素的 ID,该元素提供了 iframe 的无障碍标签。
- referrerpolicy: 控制 iframe 请求的 Referer 头部信息。
- loading:eager/lazy/auto:提供了一种方式以懒加载 iframe
- allowfullscreen: 允许 iframe 中的视频等内容进入全屏模式。
- allow-forms:开启了 sandbox 属性的情况下, 允许 iframe 包含表单。
- allow-scripts: 开启了 sandbox 属性的情况下,允许 iframe 运行脚本。
- allow-same-origin:开启了 sandbox 属性的情况下,允许 iframe 访问相同的源。
- allow-top-navigation:开启了 sandbox 属性的情况下, 允许 iframe 导航到顶层浏览上下文。