Html Iframe使用注意点

1. 项目中往往使用嵌套iframe来实现框架布局，显示整体无刷新效果。但是往往在写js事件时，会出现很多问题。下面总结一下项目中遇到的几个常规问题：

 项目中使用上中下三层，分别对应三个iframe。在上层iframe里面有用户登录和退出功能；中间的是内容显示区域，也是主要的业务功能。下层是一些说明和链接。

a.自适应高度的问题

 由于中间层是随业务变的，所以要将iframe加载后重新设定高度，按网上的做法就是获取每个iframe body的高度，但是这个不是很准确，当第一次加载后，每层是按照每个嵌套页面的高度设置的，但是当页面跳转时，新的页面如果高度没有第一个页面的高度高，则会出现iframe实际高度没有变化，只有当新的页面比前一个高度高是，高度才会变化。具体为什么还没调查，具体的解决方案是，在页面中添加一个container div 然后在iframe onload事件里获取这个div的高度，将这个div的高度设置为iframe的高度。

b. 页面跳转的问题

 在单个页面如果跳转，直接用window.location.href就能跳转，但是如果在嵌套iframe的页面中也这样写，则会出现页面出现重复了，比如两个中间iframe和两个footer，那是应为每个iframe都是一个独立的页面，它们有自己的window对象，所以如果直接重定向，则新的内容会填充到当前的iframe内，而不是整个iframe框架刷新。如果要跳转，应该是调用它们的父页面的window对象进行跳转，这样是整个iframe框架刷新了。