web开发中父子页面如何联动操作

联动操作主要分为两个方面：1）父页面控制子页面。2）子页面操作父页面
最典型的应用就是：当我登录一个系统后，打开了多个子页面，在我退出系统时，子页面自动关闭而不需要我手动一个一个的关闭子页面

对于这种需求在大型的web系统中非常常见。下面我们就来给出一个web调度台的实际应用

在web调度台中，有一个设置按钮，当用户点击这个按钮后，会用新的标签页打开一个设置的页面。当用户点击退出按钮时，子页面自动关闭。
那么这种效果是如何实现的呢？

我们熟悉HTML的都知道，打开新的窗口有多种方式，其中有一个是window.open()方法，通过api我们知道这个方法接收三个参数并且有一个返回值
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
那么我们就可以通过返回值的对象来判断子窗口的状态和属性了

在父页面的js中写上以下代码：

//子窗口
var windowArray = new Array();
/**
 * 设置功能
 * 响应设置按钮事件
 */
$(document).ready(function(){

    $(".setting").click(function(){

        //设置窗口只能打开一个
        if(windowArray.length > 0)
        {
            closeAllWindows();
        }
        var win = window.open(path + '/set.jsp?scheduleNum=' + scheduleNumber, 'setting_window', '');
        windowArray[windowArray.length] = win;

    });
});

然后在退出按钮增加事件：

$(document).ready(function() {

    //退出、关闭标示; 1退出 2关闭
    var exit_close = "2";

    //退出时提示确认信息
    $("#logout_btn").click(function(e) {
        exit_close = "1";
        logoutSure(e);
    });

    //浏览器刷新前，弹出提示确认信息
    window.onbeforeunload = function(e){
        console.log("beforeun");
        if(exit_close == "2")
        {
            logoutSure(e);
        }
    };

    //浏览器关闭前，弹出提示确认信息
    window.onunload = function(e){
        console.log("un");
        if(exit_close == "2")
        {
           $("#login").submit();
        }
    };
});

function logoutSure(e){
    if (confirm("请确认是否退出?")) {
        closeAllWindows();
        $("#login").submit();
        return true;
    }
    else
    {
        e.returnValue = false;
        return false;
    }
}

  /**
  * 退出时关闭子窗口
  */
  function closeAllWindows() {
    for (var i = windowArray.length - 1; i >= 0; i--) {
        if (windowArray.length <= 0)
            break;

        var windowRef = windowArray[i];

        if ((windowRef != null) && (windowRef.closed == false)) {
            windowRef.close();
        }
        windowArray.pop();
    }
}

以上就是利用父页面操控子页面的案例。

那么大家一定会想：如果用子页面控制父页面呢？ 接下来就讲讲这个

子页面的window对象有个属性是window.opener这个操作是：设置或获取创建当前窗口的窗口的引用，也就是子页面可以通过这个获取父页面对象的引用了，
接下来我们就展现一下web调度台的实际应用。

在设置页面我们会管理组，而增加、修改、删除组的信息时，都需要主页面刷新左边的组信息。这就需要子页面在进行一些动作时要能通话父页面
在父页面加入以下代码：

/**
 * 在设置页面增加组时，更新组名
 */
function addGroupName(name)
{
    console.log("add group name is : " + name);
    var lis = new Array();
    lis = $("li");
    for(var i = 1; i < lis.length; i++)
    {
        if($(lis[i]).find("a").attr("class").indexOf("mod") == -1)
        {
            $(lis[i]).find("a")[0].innerHTML = name;
            $($(lis[i]).find("a")[0]).addClass("mod");
            break;
        }
    }
}

在子页面加入以下代码：

    /**
     * 校验组名是否重复
     */
    function checkAddGroup()
    {
        $("#addGroupBtn").click(function(){
            var newName = $("input[name='groupname']");
            var groupName = newName.val();
            for(var i = 0; i < groupList.length; i++)
            {
                if(groupName == groupList[i])
                {
                    $("#errotMsg").text("组名重复");
                    $(newName).addClass('error_input');
                    return false;
                }
            }

            //让主页面组名更新
            top.window.opener.addGroupName(groupName);
            $(".myform_add").submit();

        });