張貼者: 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 ,但為了確保安全,還是請記得加上去。
以上,謝謝收看。