Web開発における親子ページの連動操作

連動操作は主に2つの側面に分けられる:1)親ページ制御サブページ.2)サブページ操作親ページ
最も典型的な応用は:私が1つのシステムにログインした後、複数のサブページを開いて、私がシステムを終了する時、サブページは自動的に閉じて、私が手動で1つのサブページを閉じる必要はありません
このようなニーズは、大規模なWebシステムでよく見られます.次に、Webスケジューラの実際の応用について説明します.
Webスケジューラには、ユーザーがこのボタンをクリックすると、新しいラベルページで設定されたページが開きます.ユーザが終了ボタンをクリックすると、サブページが自動的に閉じます.
では、この効果はどのように実現されているのでしょうか.
HTMLに詳しい人は知っていますが、新しいウィンドウを開くにはいろいろな方法があります.その中の1つはwindowです.Open()メソッド,apiにより,このメソッドは3つのパラメータを受信し,戻り値があることを知った.
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();

        });