html的iframe属性

简介: html的iframe属性

<iframe>标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏览器不支持<iframe>,就会显示内部的子元素

<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.baidu.com">点击打开百度页面</a></p>
</iframe>

1.iframe标签的常用属性:

allowfullscreen:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。


frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。


src:嵌入的网页的 URL。

width:显示区域的宽度。


height:显示区域的高度。


sandbox:设置嵌入的网页的权限,详见下文。


importance:浏览器下载嵌入的网页的优先级,可以设置三个值。high表示高优先级,low表示低优先级,auto表示由浏览器自行决定。


name:内嵌窗口的名称,可以用于<a>、<form>、<base>的target属性。


referrerpolicy:请求嵌入网页时,HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

2.iframe的优缺点。

优点:iframe能够原封不动的把嵌入的网页展现出来。


如果有很多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。


网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。


如果遇到加载缓慢的第三方内容,如图标、广告,这些问题可以由iframe来解决。


缺点:


1.iframe会阻塞主页面的onload事件。


2.iframe和主页面共享链接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。会产生很多页面,不容易管理。


3.iframe框架结构有时会让人感到迷惑,如果框架个数多,可能会出现上下、左右滚动条,会分散访问者的注意力,造成用户体验感差。


4.iframe代码复杂,无法被一些搜索引擎搜到,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以不利于搜索引擎优化。


5.很多的移动设备无法完全显示iframe框架,设备兼容性差。


6.iframe框架页面会增加服务器的http请求。

3.为什么很多项目的时候一般不用iframe?

iframe是一个单独的容器,因此不会应用全局的css样式。

iframe会和网页共用域名链接池,因此可能由于iframe占用了连接数导致加载阻塞。

相关文章
|
9天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
20 5
|
8天前
|
JavaScript 前端开发 UED
获取HTML元素的offsetParent属性
获取HTML元素的offsetParent属性
|
6天前
HTML 链接- id 属性
【7月更文挑战第1天】HTML 链接- id 属性。
15 1
|
9天前
|
前端开发 JavaScript
HTML 全局属性介绍及示例
HTML 全局属性介绍及示例
12 2
|
9天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
16 1
|
23天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
1月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
24 1
|
1月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
40 1
|
12天前
|
Web App开发 移动开发 搜索推荐
HTML5 新增语义标签及属性
HTML5 新增语义标签及属性
|
13天前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
26 0