多TAB页管理管理后台 用iframe加载页面使用注意事项：iframe高度自适应，内外部js相互调用等

很多WEB应用管理后台都是基于多TAB页来实现的，页面布局类似下图所示：

多TAB页通常就两种实现方式：

• div容器方式： TAB页内容只是整个页面的一个div节点，共享js和css，因此该方式实现难度较大，但是性能、安全性比较好，该实现方式必须解决：js命名空间问题。
• iframe容器模式： 每个TAB页加载一个iframe，iframe加载目标页面，该方式实现简单，性能、安全性稍差；因为简单、简单、简单，所以很多企业信息化WEB应用管理后台都是基于此方式实现。

虽说基于iframe容器模式实现相对简单，但是实际项目应用中，我们还是需要注意下述几个问题。

1、iframe高度自适应问题

在个别浏览器（比如早期版本的chrome浏览器），iframe的height设置100%，并不会将高度拉伸到到iframe父容器的高度，因此需要在生成TAB页的时候，用js代码显性设置iframe高度，参考代码如下：

// <iframe style='height:100%; width:100%;' frameborder=0 οnlοad='iframeAutoHeight(this)' scrolling='no'>
function iframeAutoHeight(self){
    var agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf("chrome")>-1){ //chrome
        $(self).height($(self).parent().height());
    }
}

2、iframe可能存在内存泄漏问题处理

iframe切换src时，比如原来加载的是a.html，可能要切换成b.html，无非2种实现方式：

• 方式1：修改iframe.src属性
• 方式2：先移除原来的iframe，再添加一个新的iframe，并用新添加的iframe加载b.html

方式1，在IE浏览器下会有内存泄漏，因此建议使用方式2来实现iframe页面切换，tab页关闭的时候，务必将iframe移除掉。

关于iframe内存泄漏，可以参考：https://www.jb51.net/article/60803.htm

3、外部调用iframe 页面里的js变量或函数

var $iframe = $(".tab-pane.active iframe");
if ($iframe.length > 0 ) {
	// 页面存在toamsg_last函数的话，调用toamsg_last函数
	if ($iframe[0].contentWindow && $iframe[0].contentWindow.toamsg_last) {
		$iframe[0].contentWindow.toamsg_last();
	}
}

4、iframe页面如何调用父页面js变量或函数

// 父页面js 方法
function sayHello(msg) {
	console.log("Hello, " + msg);
}

// iframe 页面 调用sayHello
if (window.parent && window.parent.sayHello) {
	window.parent.sayHello('老马');
}