iframe详细介绍

iframe标签介绍

iframe 元素会创建包含另外一个文档的内联框架（类似行内元素inline-block）。
提示：您可以把需要的文本放置在 之间，这样就可以应对无法理解 iframe 的浏览器。
常用属性：

属性	值	描述
src	URL	规定在 iframe 中显示的文档的 URL
frameborder	1（默认）或 0	规定是否显示框架周围的边框
scrolling	yes 或 no 或 auto（默认）	规定是否在 iframe 中显示滚动条

操作iframe

获取iframe中的内容

contentDocument：
contentDocument 属性以 HTML 对象返回框架容纳的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。

语法：frameObject.contentDocument

获取iframe中的方法

contentWindow：
contentWindow属性是指指定的frame或者iframe所在的window对象
语法：frameObject.contentWindow

操作父容器

parent属性

返回父窗口。iframe页面通过window.parent属性操作父页面中的元素与方法

top属性

window.top 功能：返回顶层窗口，即浏览器窗口

iframe获取父容器的内容

parent.document

iframe获取父容器的方法

parent

加载

iframe加载完成

frameObject.onload = function() {}

iframe父容器加载完成

parent.onload = function () {}

示例

index.html

	
		
		
		
		
	
	
		

			parentNode
		
		
		
	

iframe.html

  
  
  
  
  



  
iframeNode

使用iframe的优缺点

优点

程序调入静态页面比较方便

缺点

1.用在首页,对搜索引擎不友好影响网站排名。
2.创建DOM相对较慢。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
3.iframes 阻塞页面加载。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过 JavaScript 动态设置 iframe的src属性可以避免这种阻塞情况。
4. 占用唯一的连接池。浏览器只能开少量的连接到web服务器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 src属性。