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占用了连接数导致加载阻塞。

相关文章
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
51 1
|
14天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
14天前
|
前端开发 搜索推荐 算法
|
14天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
14天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
|
22天前
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
|
23天前
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
WK
|
1月前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
25 1
|
1月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
109 0

热门文章

最新文章