石家庄人才网今天给大家分享《前端iframe用法》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

iframe 元素规定了一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不允许使用 iframe 元素。

提示和注释：请使用 CSS 来设置 iframe 元素的样式。

注释：所有主流浏览器都支持 <iframe> 标签。

iframe标签是用来在网页中插入第三方页面的，早期的网站开发中用的比较多，后来由于手机端的应用，iframe标签的使用越来越少，但是还是有一些特殊的应用场景会用到iframe标签，比如：网页集成第三方支付平台的支付页面，网页集成第三方地图等。

iframe 的优缺点

优点：

1、iframe能够原封不动的把嵌入的网页展现出来。

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

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

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

缺点：

1、石家庄人才网小编告诉你，创建比一般的 DOM 元素慢，会阻塞主页面加载。

2、iframe 会阻塞主页面的 onload 事件。

3、搜索引擎的检索程序无法解读这种页面，不利于 SEO。

4、iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

5、使用 iframe 需要考虑两个页面的兼容问题。

iframe标签的属性

iframe标签有以下属性：

src：规定在 iframe 中显示的文档的 URL。

srcdoc：HTML5 属性。规定要显示为 iframe 内容的 HTML。

name：规定 iframe 的名称。

width：规定 iframe 的宽度。

height：规定 iframe 的高度。

frameborder：规定是否显示 iframe 周围的边框。设置属性值为"0"，表示隐藏边框，设置属性值为"1"，表示显示边框。

scrolling：规定是否在 iframe 中显示滚动条。设置属性值为"yes"，表示显示滚动条；设置属性值为"no"，表示隐藏滚动条；设置属性值为"auto"，表示自动显示滚动条。

align：不赞成使用。规定如何根据周围的元素来对齐 iframe。

longdesc：不赞成使用。规定一个页面，该页面包含了有关 iframe 的较长描述。

marginheight：不赞成使用。规定 iframe 的顶部和底部的边距。

marginwidth：不赞成使用。规定 iframe 的左侧和右侧的边距。

sandbox：HTML5 属性。启用一系列对 iframe 中内容的额外限制。

allowfullscreen：HTML5 属性。规定是否 iframe 元素以全屏模式显示。

iframe标签的使用

iframe标签的使用很简单，只需要在页面中插入iframe标签，并设置好src属性即可。

例如，要在页面中插入百度搜索页面，可以使用以下代码：

<iframe src="https://www.baidu.com"></iframe>

iframe标签可以设置width和height属性来控制iframe的宽度和高度，例如：

<iframe src="https://www.baidu.com" width="500" height="300"></iframe>

iframe标签还可以设置framebor

<iframe src="https://www.baidu.com" frameborder="0"></iframe>

iframe标签还可以设置scrolling属性来控制iframe是否显示滚动条，例如：

<iframe src="https://www.baidu.com" scrolling="no"></iframe>

iframe标签还可以设置name属性来给iframe命名，例如：

<iframe src="https://www.baidu.com" name="baidu"></iframe>

iframe标签还可以设置target属性来指定链接的目标窗口，例如：

<a href="https://www.baidu.com" target="baidu">百度</a>

iframe标签还可以设置srcdoc属性来指定iframe的内容，例如：

<iframe srcdoc="<h1>Hello World!</h1>"></iframe>

iframe标签还可以设置sandbox属性来启用一系列对 iframe 中内容的额外限制，例如：

<iframe src="https://www.baidu.

iframe标签还可以设置allowfullscreen属性来规定是否 iframe 元素以全屏模式显示，例如：

<iframe src="https://www.baidu.com" allowfullscreen></iframe>

iframe标签的应用场景

iframe标签的应用场景有很多，例如：

1、网页集成第三方支付平台的支付页面，例如支付宝、微信支付等。

2、网页集成第三方地图，例如百度地图、高德地图等。

3、网页集成第三方登录，例如QQ登录、微博登录等。

4、网页集成第三方分享，例如QQ空间分享、微信朋友圈分享等。

5、网页集成第三方评论，例如畅言评论、多说评论等。

6、网页集成第三方统计，例如百度统计、CNZZ统计等。

7、网页集成第三方广告，例如百度广告、谷歌广告等。

8、网页集成第三方视频，例如腾讯视频、优酷视频等。

9、网页集成第三方音乐，例如QQ音乐、网易云音乐等。

iframe标签的注意事项

iframe标签在使用过程中需要注意以下事项：

1、iframe标签会阻塞主页面的 onload 事件，因此，如果iframe加载的内容比较多，会影响到主页面的加载速度。

2、搜索引擎的检索程序无法解读iframe标签，因此，如果要在iframe中嵌入重要的内容，建议使用其他方式实现。

3、iframe标签会创建比一般的 DOM 元素慢，因此，如果页面中使用了大量的iframe标签，会影响到页面的渲染速度。

4、iframe标签和主页面共享连接池，而浏览器对相同域的连接有限制，因此，如果页面中使用了大量的iframe标签，会影响到页面的加载速度。

5、使用iframe标签需要考虑两个页面的兼容问题，因此，建议尽量避免使用iframe标签。

石家庄人才网小编对《前端iframe用法》内容分享到这里，如果有相关疑问请在本站留言。