页面间多层嵌套的js方法调用

问题描述

• 在页面A的方法中调用layer.open打开了一个新页面（页面B）
• 页面B中有一个iframe标签，iframe标签链接了另一个页面（页面C）
• 页面A需要调用页面C的某个方法

解决方案

• 一级一级的来，先解决然后调用页面B，然后再解决如何调用页面C

  • 页面C中添加一个方法

    function test(){alert("成功调用页面C");}
    

  • 在页面B中添加一个方法

    function test(){
    	// tableIframe为iframe的id
    	$("#tableIframe")[0].contentWindow.test();
    }
    

  • 在页面A中调用

     layer.open({
         type: 2,
         title:false,
         area: ['100%', '100%'],
         btn: ['调用页面C','确定','关闭'],
         // 弹层外区域关闭
         shadeClose: true,
         btn1: function (index, layero){
             // 调用页面C的方法test
         	window["layui-layer-iframe" + index].test();
         },
         btn2: function(index, layero) {
             //点击第二个按钮处理逻辑
             layer.close(index);        
         },
         btn3: function(index, layero){
             //点击第三个按钮处理逻辑
             layer.close(index);
         },
         content: url,
    });
    

• 页面C中的js代码都是封装的，例如

  var Func = (function () {
  	var func1 = function(){}
  	return {
  		func1:func1
  	}
  })();
  

  • 修改页面C中的代码，在Func中添加test方法

    var Func = (function () {
    	var func1 = function(){}
    	var test = function(){alert("成功调用页面C");}
    	return {
    		func1:func1,
    		test:test
    	}
    })();
    

  • 在页面B中修改调用

    function test(){
    	// tableIframe为iframe的id
    	var win = $("#tableIframe")[0].contentWindow;
    	if(win && win.Func && win.Func.test){
    		$("#tableIframe")[0].contentWindow.Func.test();
    	}
    }
    

• 当iframe的跳转链接不确定时，链接有三个，可能是任意一个

  • 前置条件：

    • 三个链接中的封装类和方法已知
    • 每个连接有且只有一个test方法（即一个封装类带一个test方法）

  • 解决办法：在页面B中继续使用方法判断机制，如果封装类存在，且有test方法，则执行

    function test(){
    	var func = [];
        func.push("Func1");
        func.push("Func2");
        func.push("Func3");
        // tableIframe为iframe的id
        var win = $("#tableIframe")[0].contentWindow;
        // 遍历已知的三个封装类
        $.each(func, function(key, value) {
            //如果存在该封装类，并且这个封装类中存在test方法
            if(win[value] && win[value].test){
    			// 调用test方法
                win[value].test();
                // 如果只调用一次就返回，则添加return
                return;
            }
        });
    }