iframe标签的使用及优缺点

最新推荐文章于 2024-08-04 12:47:40 发布

blueS~

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量2.2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_42707181/article/details/88395813

版权

web前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

1、 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

2、优点缺点

优点：1、支持任何浏览器

2、原封不动的把嵌入的网页展现出来

3、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度

缺点：1、页面复杂度高，不容易管理

2、页面加载速度相对frame较慢

3、代码复杂，无法被一些搜索引擎索引到

3、属性

align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

4、运用


<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<style type="text/css">
			.frame_left div{
                float:left;
                padding:20px;
                margin-left:40px;
			}
			.frame_right{
                margin-top:100px;
				width:100%;
				height:500px;
				float:left;
				border:1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="frame_left">

			<div><a href="https://www.taobao.com" target="demo"  >淘宝</a></div>
			<div><a href="https://www.baidu.com"  target="demo"  >百度</a></div>

		</div>
		<div class="frame_right">
			<iframe  src="http://baidu.com"  name="demo" height="500" width="100%	" frameborder=0 ></iframe>
		</div>
	</body>
</html>