在父子页面嵌套的结构中，当父页面完成某个操作后给子页面一个回调函数

企业级系统中有一种常见的页面结构，所有的表单都套在一个父页面里。

有业务场景: 要求父页面在子页面完成加载后做一些操作，如下

这些代码不是本文的重点内容，不做介绍了

//这里的iframe是<iframe>元素
init_my_iframe:function(iframe){
		if (iframe.attachEvent){
			iframe.attachEvent("onload", function(){
				doWorkA(iframe); //在子页面完成加载后执行
			});
		} else {
			iframe.onload = function(){
				doWorkA(iframe); //在子页面完成加载后执行
			};
		}
	},

另外又有些业务场景需要在父页面做完doWorkA()的操作后，给子页面一个回调，子页面可以再做一些操作。下面直接上代码

init_my_iframe:function(iframe){
		if (iframe.attachEvent){
			iframe.attachEvent("onload", function(){
				doWorkA(iframe); //在子页面完成加载后执行
                //doWorkA完成后给子页面一个回调
				if(iframe.contentWindow && iframe.contentWindow._doAfterDoWorkA){
					iframe.contentWindow._doAfterDoWorkA();
				}
			});
		} else {
			iframe.onload = function(){
				doWorkA(iframe); //在子页面完成加载后执行
                //doWorkA完成后给子页面一个回调
				if(iframe.contentWindow && iframe.contentWindow._doAfterDoWorkA){
					iframe.contentWindow._doAfterDoWorkA();
				}
			};
		}
	},

然后在需要做后续逻辑的子页面的js代码中定义对应的函数_doAfterDoWorkA()即可，如下

function _doAfterDoWorkA(){
    console.log('父页面的doWorkA完成了,到我执行逻辑了')
}

本文到此结束，欢迎大家提意见和交流