iframe深度理解

前言

如果你的页面是一个后台管理页面，那么你一定对iframe不陌生。从h5定稿开始，在涉及框架引入页面时，统一建议使用iframe来进行相关的资源嵌入。
使用场景

1、通常在不希望整体页面跳转，只需要主体页面跳转，则需要加入iframe标签来作为展示页面的窗口，通常在管理后台 、qq邮箱等管理界面应用比较多。

2、iframe 的属性中有src以及name属性 ，通过这两个属性可以搭配a标签实现第一条的需求，name是a连接target属性的指向地址，而src的地址可以通过a的href来改变

基本属性

1、src 属性 指向该框架链接的页面地址，可以为相对请求地址，也可以为绝对地址，也可以为外网地址，当为不同服务器项目涉及跨域时，控制台会报错，但不会影响正常的显示

2、name 大多数标签都有的自带属性，在input中为特殊含义 指代数据项的类型，而在iframe中可以用来当做目标

3、frameborder 框架的边框可以用cssborder 代替

4、width 一般由展示的空间决定宽度 ，height一般由载入页面的高度确定

5、scrolling :auto yes no ,也可以用css 的overflow 的相关属性来控制

iframe获取子页面的高度

• 通常用于正确设置嵌入页的高度，一般情况下要设置展示嵌入页为固定大小的。

//父页面载入获取高度　
标签内事件 ： onload="this.height=this.contentWindow.document.documentElement.scrollHeight"
js脚本通用事件
$( "iframe").load( function () {
   $(this).height($(this).contents().find( "body" ).height() + 30 );
})
//子页面载入之后　改变高度　  
var htmlHeight=$("body").height()+30;
$("#iframe", window.parent.document).height(htmlHeight);

父子页面元素的获取

• 父页面以及子页面位置的元素获取

// 父页面获取子页面的元素 
$("#iframe").contents().find("#body")
//子页面获取父页面的元素
$(window.parent.document).find("#iframe")