拜AJAX套件盛行所賜,window.open()這個東西我已經好久沒用了,每當遇到這種有彈跳視窗的UI時大部分都是用Thickbox(已停止更新)或者其他Diaglog UI元件來做,不過今天遇到一個要開新視窗的UI設計,需求是父視窗要能夠操縱開啟的子視窗,不過上網找了一下大部分談window.open()的文章多半是講用子視窗來控制父視窗,譬如說:開啟一個子視窗的購物選單畫面,把User子視窗內選擇的東西回傳父視窗,這種操作只需透過opener物件即可完成對父視窗的操作;很少有文章談到父視窗如何操縱他開出來的子視窗。

在換過一堆關鍵字後終於讓我在網站建置百寶箱裡面找到街燈電箱105號寫的:『跟隨父視窗關閉的子視窗』這篇文章,參考他的原始碼後才了解到,如果要讓父視窗能夠操縱子視窗的話,在子視窗建置的初期就必須將子視窗變成物件(指進父視窗的變數中),以下是範例原始碼:

<script>
var newWindowObj;
function openDependentWindow(url){
newWindowObj=window.open (url, "newwindow", "height=600, width=800, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}

function closeWindow(){
 newWindowObj.close();
}

function changeWindowLocation(){
 newWindowObj.location="http://www.google.com";
}
</script>
<a href="#" onclick="openDependentWindow('http://tw.yahoo.com')">開啟子視窗</a><br>
<a href="#" onclick="changeWindowLocation();">讓子視窗跳到google</a><br>
<a href="#" onclick="closeWindow();">關閉子視窗</a>

上述的Demo Code,透過openDependentWindow這個函式把初始化的子視窗指給全域變數newWindowObj,接著就可以透過newWindowObj來對該視窗作相當多的操作,街燈電箱105號寫的:『跟隨父視窗關閉的子視窗』的文章中則是又更進一步的把所有子視窗都塞到陣列裡面,這樣一來不管開了多少個子視窗都可以透過該陣列來管理,對於想了解window.open()是如何操作子視窗的人來說是很有參考價值的一篇文章

創作者介紹
創作者 nsysumis94 的頭像
nsysumis94

Nightmare的胡言亂語

nsysumis94 發表在 痞客邦 留言(0) 人氣()