有人说iframe是能耗更高的元素，尽量少用。还有人说iframe安全性太差，应该尽量少用。虽然他们说的是真的，但是iframe强大的功能也不容忽视，现在很多公司都在使用。

iframe标记指定了一个内联框架。内联框架用于在当前的HTML文档中嵌入另一个文档。

所有主流浏览器都支持iframe标签。您可以将提示文本放在iframe和/iframe中，以便提示文本出现在不支持iframe的浏览器中。

iframe怎么用？

通常，我们使用iframe直接在页面上嵌套iframe标签指定的src。

例如：

！-

iframe标记指定了一个内联框架

p标签写在这里是为了看对齐的效果-

pstyle=' overflow:hidden'这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。iframename=' myiframe ' id=' myrame ' src=' external _ file . html ' frame border=' 0 ' align=' left ' width=' 200 ' height=' 200 ' scrolling=' no '

p您的浏览器不支持iframe标记/p

/iframe

这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。这里有一些文字。/p

iframe的常见属性：

Name:指定iframe的名称。

Width:指定iframe的宽度。

Height:指定iframe的高度。

Src:指定在iframe中显示的文档的URL。

Frameborder:指定是否显示iframe周围的边框。(0无边框，1位有边框)。

Align:指定如何根据周围元素对齐iframe。(左，右，上，中，下).

滚动：指定是否在iframe中显示滚动条。(是，否，自动)

在上面的代码中，iframe的src属性是一个本地html页面

代码如下：

身体

divid=' div ' style=' height :300 px；背景# ddd这是外部文件/div/bodyscript中的内容

var div=document . GetElementbyID(' div ')；

console . log(div)；/script

任何交互部分也写在这个页面上，iframe会自动传输到导入的页面。

那么如何获取iframe的内容呢？

vari frame=document . GetElementbyID(' my name ')；//获取iframe标记

vari window=iframe . ContentWindow；//获取iframe的窗口对象

vari doc=I window . document；//获取iframe的文档对象

console . log(idoc . DocumentElement)；//获取iframe的html

console.log('body '，idoc . body)；

但是，你不能得到里面的DOM，你可以在URL中得到(也就是导入的html文件)

iframe的优缺点

优点：

重装页面时，不需要重装整个页面，只需要重装页面中的一个框架页面(减少数据传输和网页加载时间)；

技术简单易用，主要应用于不需要搜索引擎搜索的页面；

方便开发，降低代码重复率(如页眉、页脚)；

缺点：

会产生大量页面，不易管理；

不易打印；

多框架页面将增加对http请求的服务；

浏览器的后退按钮无效；

因为很多缺点，不符合标准网页设计的理念，已经被抛弃。目前HTML5已经不支持这个标签了。

本文转载自中文网站