Javascript開新視窗Tips

 

張貼者： Caesar Chi

開發網站介面的時候，常常會遇到空間不足的問題。瀏覽器大小就這樣，要放進網頁的資訊卻那麼多，該怎麼辦呢？

如果只是單純顯示資料，用AJAX呼叫回傳，顯示在select tag或div裡面就可以了。這樣介面簡潔，操作也不複雜。可是，如果需要更多互動的話，用AJAX，開發人員辛苦之外，介面太複雜維護不易，用戶用起來也不見得舒服。

這時候，開個小視窗另外操作，必要時也可以回傳結果到母網頁，對開發人員和用戶來說，應該都可以是權宜的好辦法。

window.open很常用也很簡單，本篇分基本型、完整型、遙控型三方面介紹，接下來就直接進範例嚕：

1.基本型
window.open ('page.html');

這是給只是想丟資料出來的人用的，或是想要強制另外開視窗。不過，真是這樣的話，用Yahoo!會更好。當然有時也會，需要用程式來判斷網頁方向也說不定。簡而言之，這個是方便記憶用的。

2.完整型
window.open ('page.html', '_blank', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

應該大部分會用到的是這行吧！先給目標URL，其次是開啟的目標，等同a tag的target屬性。第三個參數，就是給被開啟的瀏覽器設定，設定參數在上面的範例應該都有了，如果有缺漏請跟我說喔^__^。

3.遙控型
var new_window=window.open( ... );
if( new_window.opener == null ){ new_window.opener=window; }

這裡展示的是開啟新視窗之後，還想要繼續對新開的視窗做操作時，我們就可以用一個變數接收window.open()的回傳，如此就可以追蹤新開的視窗。新視窗也可以透過window.opener，將特定的資訊回傳給母視窗。

例如：在新視窗裡用：
window.opener.document.getElementById('obj').innerHTML="XXX";
或者
window.opener.location = 'http://......';
就可以從新視窗控制母視窗的網頁，執行如訊息回傳，重導網址，或是其他功能。

但是，有些舊版的browser不會自動建立新視窗和母視窗之間的關連，也就是new_window.opener這個屬性。所以後面的這個 if 敘述，就能確保opener保持在正確的設定。新視窗和母視窗溝通時，才不會發生找不到媽媽（opener）的問題。

這個 if 很重要喔！雖然新版的瀏覽器多都有支援 opener ，但為了確保安全，還是請記得加上去。

以上，謝謝收看。