第一個任務

上禮拜四  我的partner(簡稱T)給了我一個任務
這禮拜四要把和廠商合作的東西搞定
果然... 大公司就是指高氣昂  之前講了好久也沒搭理
現在一要做  就把時程押得這麼緊
抱怨歸抱怨  我不希望自己是"只會"抱怨的人
(創業家既要了解問題所在  但又要抱著正向的態度去迎向它  不淪為抱怨)
so... 做吧!

其實這個任務說來也不難
大概步驟是這樣:
1. 在網頁上create一個div   裡面有個按鈕
2. 點那個按鈕會跳出一個子視窗(child window)
3. 在子視窗裡面會進行一些事情  進行完畢後會自動關閉
4. 關閉後  母視窗要偵測到這個事件(event)  並且做後續的處理
注意: 本任務中母視窗和子視窗的網域是不同的  所以難度增加

那些程序  另一個夥伴(簡稱L)已經survey過  所以沒出什麼大問題
主要是卡在3.  母視窗要怎麼偵測子視窗關閉的問題
我原本以為只要在子視窗開啟時  指定它一個handle(指標那樣的指向變數)
然後再去綁定一個close event給他就好  結果似乎沒那麼簡單...
用 "detect child window close"去google
第一個結果是這個: http://www.codingforums.com/showthread.php?t=48209
原理很簡單  是利用 window.opener 這個屬性
什麼意思? 在子視窗內叫用window.opener  代表是跳到那個"開啟它的視窗"
所以  只要在子視窗的body內指定一個 onunload="closedetect()" event handler
這個事件會觸發只有兩個條件: 1. 頁面消滅  2. 換頁
也就是說  當子視窗被關掉時  會觸發closedetect() 的執行
而closedetect() 裡面只要寫 window.opener.somethingYouWantToDo
而在母視窗裡面定義一個somethingYouWantToDo() function 即可
這個function 的內容就是視窗關閉後想做的後續處理
殘念的是... 光是IE8 就過不了  很慘  錯誤訊息是"沒有權限執行"
我想是跨網域的問題  不能取得彼此的function
所以以上解法只有在同網域下成立

第二個線索是L提供的 http://stackoverflow.com/questions/781770/can-the-parent-window-be-notified-when-a-child-window-closes-on-a-diff-domain
想法也很簡單  就是打從子視窗出娘胎  就派一個人定期去監視他
若發現他關閉了  就立刻執行後續動作  範例如下:


var win = open('http://www.google.com');
var intervalId = setInterval(function() {
        if (win.closed) {
            clearInterval(intervalId);
            alert('Window closed! Hoorah!');
        }
    }, 5000);

很邪門的是  此法在FF Chrome 都可以運作無誤
在IE  Safari則不行  IE會顯示"引數錯誤"  是open 那行
此method 的文件http://www.w3schools.com/jsref/met_win_open.asp
在survey的過程中遇到了一個很蠢的文章 http://www.blogjava.net/sealyu/archive/2008/11/08/239429.html
我期間把法一拿來在local試  發現在IE Safari皆可以後  想寫一個判斷式  讓IE和Safari走法一  然後其它走法二  忘記跨網域的限制  這引發了一個問題 -- 在jQuery 怎麼去判斷目前瀏覽器是Chrome?  jQuery 1.5 還沒支援呢  真奇怪!  最後發現那樣解不了後(就是法一的發現  在跨網域會有存取權限錯誤)  就把這問題擱置啦

最後終於找到一點線索 http://bytes.com/topic/javascript/answers/89223-window-open-not-working-ie
噢  原來是我多此一舉的設定視窗名稱出了問題  不能有空白...
怎麼有這麼無聊的規定啊!!!  (我很長一段時間一直以為是下面的setInterval 那邊導制的錯誤)
所以   以下的是最終的可行版(在IE FF Chrome Safari 都測過了)


my_window = window.open(window_url, 'FacebookConnectWindow', 'height=450, left=300, resizable=0, scrollbars=0, titlebar=1, toolbar=0, top=200, width=850','true');
var intervalId = setInterval(function() {
if (my_window.closed) {
clearInterval(intervalId);
alert("window close!");
// do something we want
}
}, 800);

經過實測  這樣polling的方式對瀏覽器的負擔還好  感覺不出會造成什麼延遲  加上時間有限  我會暫時用這個方法吧!

此次任務的規劃期比較長  因為是沒辦法後來再修的東西  跟大廠合作  出去再改會很不好
搞不好對方就此不跟我們合作了  所以花在規劃的時間大概有兩天
克服核心技術問題大概也用兩天  共計四天產出正式版本
現在是AM3:31  日誌完成  去修code

感想: 壓力大時  真的什麼都想不出來  我還是適合做一做 出去走走透透氣  不適合花大把時間枯坐在桌前苦思;  我很願意學  基礎能力也還OK 不要把我當白痴  越是這樣我就真的會表現得越白痴

學到一點小: IE的開發者工具  當DOM 改變時(例如append新東西)  要點上方工具列的"重新整理"才會顯示目前最新的DOM狀況

留言

熱門文章