開新視窗與回傳值

此篇介紹open、opener 和 showModalDialog

※open、opener

使用open、opener，主流的瀏覽器都有支援

※dad.html

function openWindow(){  
    window.open('son.html','_blank','height=400,width=400');  
}
----------
<form name="dadForm">
    <table>
        <tr>
            <td>
                <input type="button" value="開新視窗" onclick="openWindow()">
                <input name="ooo" value="999" />
                <input name="rtn" disabled="disabled" />
            </td>
        </tr>
    </table>
</form>

※W3C文件有寫open有四個參數，第三個參數有很多，我只寫兩個，可以參考看看

※son.html

function closeWindow(){
    alert(document.sonForm.xxx.value);
    alert(window.opener.document.dadForm.ooo.value);
    // 將xxx的value給父視窗的rtn
    window.opener.document.dadForm.rtn.value = document.sonForm.xxx.value;
    window.close();
}
----------
<form name="sonForm">
    <table>
        <tr>
            <td><input name="xxx" value="20" /></td>
        </tr>
        <tr>
            <td>
                <input type="button" value="確認" onclick="closeWindow()">
            </td>
        </tr>
    </table>
</form>

※使用window.opener開頭可以呼叫父視窗的資料

※通常還有兩個事件比較常用
onunload：按右上角的X鈕會觸發
onbeforeunload：離開頁面就會觸發
注意呼叫window.close()會關閉視窗，關閉前會呼叫onbeforeunload方法，但onunload沒有呼叫到
按右上角的X兩個都會呼叫到

window.onunload = function(){
    // ...
}
    
window.onbeforeunload = function(){
    // ...
}

※內容還是可以用window.opener開頭呼叫爸爸的一些有的沒的

※其他事件可參考mozilla官網的WindowEventHandlers教學

※showModalDialog

IE有支援
參考資源

※和open、opener的差別主要有兩個

1.使用showModalDialog不能按右鍵
2.使用showModalDialog會將父視窗凍結起來

※dad.html

function modalDialog(){
    var rtn = window.showModalDialog('son.html', document.dadForm.ooo.value,'dialogHeight=400,dialogWidth=400');
    alert('return=' + rtn);
}
----------
<form name="dadForm">
    <table>
        <tr>
            <td>
                <input type="button" value="開新視窗" onclick="modalDialog()">
                <input name="ooo" value="999" />
                <input name="rtn" disabled="disabled" />
            </td>
        </tr>
    </table>
</form>

※第一個參數是必填，其他都是選填

※變數可以接收子視窗的回傳值

※第二個參數可以傳陣列，這樣就可以傳多個值了

※son.html

window.onload = function(){
    alert(window.dialogArguments);
}
    
function closeWindow(){
    alert(document.sonForm.xxx.value);
    // 將xxx的value給父視窗的rtn
    window.returnValue = document.sonForm.xxx.value;
    window.close();
}
----------
<form name="sonForm">
    <table>
        <tr>
            <td><input name="xxx" value="20" /></td>
        </tr>
        <tr>
            <td>
                <input type="button" value="確認" onclick="closeWindow()">
            </td>
        </tr>
    </table>
</form>

※window.dialogArguments可以接受父視窗的參數

※window.returnValue可以將值回傳給父視窗

※類似像showModalDialog的，我提供的超連結還有兩個showModelessDialog、show，這我沒研究，因為主流瀏覽器不是全部支援，應該是大同小異吧！