JSP 頁面間彈窗傳值：從選擇企業彈窗回填主頁表單

常見需求：主頁（add.jsp）點擊「請選擇」按鈕，彈出選擇頁（select.jsp）列出資料庫企業清單，使用者勾選一筆後確認，彈窗關閉並將企業名稱回填主頁輸入框。本文整理兩種主流實作方式。

方式一：window.showModalDialog（IE 專屬，不建議新專案）

舊專案常用，但 Chrome/Firefox/Edge 已移除支援。程式碼如下：

// add.jsp
function openWindow() {
    var result = window.showModalDialog('/xq.do?action=showTjList', window,
        'status:no;scroll:yes;dialogWidth:400px;dialogHeight:400px');
    if (result) {
        document.getElementById('companyName').value = result.name;
        document.getElementById('companyId').value = result.id;
    }
}

// select.jsp 確認按鈕
function confirmSelect(id, name) {
    window.returnValue = {id: id, name: name};
    window.close();
}

缺點：非標準、跨瀏覽器相容性差、無法在現代瀏覽器使用。

方式二：window.open + postMessage（標準、跨域安全、推薦）

主頁

function openSelectDialog() {
    const dialog = window.open('/xq.do?action=showTjList', 'selectDialog', 'width=600,height=500');
    window.addEventListener('message', function(event) {
        if (event.origin !== location.origin) return; // 安全驗證
        if (event.data.type === 'SELECT_COMPANY') {
            document.getElementById('companyName').value = event.data.name;
            document.getElementById('companyId').value = event.data.id;
            dialog.close();
        }
    });
}

選擇頁

function confirmSelect(id, name) {
    window.opener.postMessage({
        type: 'SELECT_COMPANY',
        id: id,
        name: name
    }, window.location.origin);
    window.close();
}

若選擇頁需查詢資料（AJAX）

select.jsp 載入時呼叫後端 Action 取得企業清單 JSON，前端渲染表格，勾選後帶回。Action 只需回傳 JSON，無需轉發 JSP。

Action 層設計建議

• /xq.do?action=showTjList：回傳企業清單 JSON（分頁、搜尋參數）。
• 主頁無需額外 Action，純前端接收 postMessage 即可。

注意事項

• 攔截器/過濾器需允許彈窗頁面無需登入即可存取（或共享 Session）。
• 行動裝置螢幕較小，建議改用全頁面導向（location.href）並利用 sessionStorage 暫存選擇結果返回。
• 若專案已使用前端框架，建議改用 Modal 組件（Bootstrap Modal、Element UI Dialog）避免彈窗攔截器攔截。

結語

現代 Web 開發請捨棄 showModalDialog，採用 window.open + postMessage 或前端框架 Modal 組件，確保跨瀏覽器相容與安全性。