ASP.NET 類 QQ 即時通訊：JavaScript 視窗註冊機制實作

開發嵌入主框架的 Web 即時通訊系統時，需解決多視窗間的引用管理：防止重複開啟聊天視窗、主視窗關閉時級聯關閉子視窗、跨視窗呼叫函式。本文詳述 JavaScript 視窗註冊機制的完整實作。

需求場景

• MainFrm.htm：啟動視窗，開啟 a.htm（唯一實例）
• a.htm：可開啟 b.htm、c.htm（各唯一實例）
• 關閉傳遞：MainFrm 關閉 → a/b/c 全關閉；a 關閉 → b/c 關閉

核心程式碼：陣列擴充與視窗快取

// 陣列原型擴充：add、remove、clear
if (!Array.prototype.add) {
    Array.prototype.add = function() {
        var startLength = this.length;
        for (var i = 0; i < arguments.length; i++)
            this[startLength + i] = arguments[i];
        return this.length;
    };
}
if (!Array.prototype.remove) {
    Array.prototype.remove = function(index) {
        if (index >= 0 && index < this.length)
            this.splice(index, 1);
    };
}
if (!Array.prototype.clear) {
    Array.prototype.clear = function() {
        this.splice(0, this.length);
    };
}

// 已註冊視窗快取陣列
var g_oWindowArray = new Array();

視窗註冊與管理邏輯

// 註冊視窗：檢查是否已開啟，未開啟則開啟並加入快取
function RegisterWindow(windowName, url, features) {
    for (var i = 0; i < g_oWindowArray.length; i++) {
        if (g_oWindowArray[i].name == windowName && !g_oWindowArray[i].closed) {
            g_oWindowArray[i].focus();
            return g_oWindowArray[i];
        }
    }
    var newWin = window.open(url, windowName, features);
    g_oWindowArray.add({ name: windowName, win: newWin });
    return newWin;
}

// 關閉視窗並從快取移除
function UnregisterWindow(windowName) {
    for (var i = 0; i < g_oWindowArray.length; i++) {
        if (g_oWindowArray[i].name == windowName) {
            if (!g_oWindowArray[i].win.closed)
                g_oWindowArray[i].win.close();
            g_oWindowArray.remove(i);
            break;
        }
    }
}

// 級聯關閉：關閉指定視窗及其所有子視窗
function CloseWindowTree(windowName) {
    var parent = GetWindow(windowName);
    if (!parent) return;
    // 遞迴關閉子視窗（需維護父子關係對應表）
    // ...
    parent.win.close();
}

MainFrm.htm 關閉事件處理

window.onunload = function() {
    for (var i = 0; i < g_oWindowArray.length; i++) {
        if (!g_oWindowArray[i].win.closed)
            g_oWindowArray[i].win.close();
    }
};

關鍵設計重點

1. 唯一性保證：以視窗 name 為鍵值，配合 closed 屬性檢查，防止重複開啟。
2. 引用持久化：將 window.open 回傳的視窗物件存入陣列，維持跨視窗呼叫能力。
3. 生命週期同步：利用 onunload、onbeforeunload 事件觸發級聯關閉。
4. 跨框架通訊：子視窗透過 window.opener 或 parent 存取主視窗函式與變數。

現代化替代方案

現今專案建議採用 Single Page Application (SPA) 架構，以 Vue/React + SignalR/WebSocket 實作即時通訊，避免多視窗管理複雜度，提升使用者體驗與維護性。