iframe标签使用总结

前言

• 最近公司在做后台管理系统,需要实现单页面的跳转,不知是谁突发奇想要用iframe标签来进行实现

• 在这过程中,遇到的问题,来分享一下

iframe的定义与用法

• iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

我自己在使用的时候是首先是创建一个父级页面，固定好上部和左侧，右侧定义一个iframe标签，整个标签的宽度、高度占右侧的100%

* 在定义iframe时,给iframe的设置:

`<div class="right"><div class="main"><iframe id="main_frame" name="open_frame" border="0" frameboder="0" scrolling="auto" width="100%" height="100%" src="./mainContext.html"></iframe></div></div>`

* 当然了父页面的a链接必须带有 ` target="open_frame"` 属性，这个 `target的值` 就是iframe中的 `name属性` 的值
* 
* .right这个盒子定义整个右侧这一块的位置；.main这个盒子定义样式,比如说右侧的padding等;
* 
* iframe标签中的name属性是为了给页面上要显示在这块区域的链接一个约定;其他的属性可以自己去查文档,都有很详细的解释

iframe标签定义高度

* 在iframe标签中设置了 'height=100%',若页面内容不是很多,这个区域就撑不起来,所以需要我们使用JS来控制iframe的高度

`var $height=$(window).height();`
`$('iframe').css({'height':$height-140});`  当然这是140是根据你的top的高度和 .main的pading、margin值来设置

在子页面、父页面互相获取元素

** 必须开启服务器,在这里介绍几种开启服务器方法 **

* 如果你配置好了WampServer,那么你只需要把代码放在www文件夹中,通过localhost:端口号来进行访问

* 你安装了node和npm,那么你需要配置一下anywhere就可以了,它是一静态服务器
    
    配置方法:   `npm install anywhere -g` <br/>

    使用方法: 在当前文件夹打开cmd命令行(shift+右键)，输入   anywhere 端口号  

* 服务器开启起来了,你就可以跨域获取元素了

子页面获取iframe父页面元素的方法

* 方法一:
`var $arrow = $(".triangle-right", window.parent.document);`

* 方法二:
`var $arrow = $(window.parent.document).find(".triangle-right");`

父级页面获取iframe子页面元素的方法

** 在父级页面加载的时候,子级页面不一定是加载完成的,所以建议使用子页面获取父级元素的方式 **

`var $mainCon = $("#mainCon",document.frames('iframename').document)`

【end】