iframe详细介绍

iframe详细介绍

  • iframe标签介绍
  • 操作iframe
    • 获取iframe中的内容
    • 获取iframe中的方法
  • 操作父容器
    • parent属性
    • top属性
  • iframe获取父容器的内容
    • iframe获取父容器的方法
  • 加载
    • iframe加载完成
    • iframe父容器加载完成
  • 示例
  • 使用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





  
  
  
  Document
  



  
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属性。

你可能感兴趣的