window.open() - 母視窗 Unload 後、重新取得子視窗物件

此篇文章最近更新時間為2011-06-27 03:56:19 目前共有5篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

window.open 依然好用

最近常有基於 window.open() 所開發的新功能...
市面上常見的... 像是 Facebook 在第三方網站登入KKBOX 的 Web 音樂播放器都是例子。

Snap9

物件參考的問題

有個問題一直困擾著我,就是 window.open() 開了子視窗後、
若母視窗有觸發到 unload 時,物件的參考就會被摧毀。

var newWin = window.open("open.html", "new_window", "width=300,height=500");

即使 open.html 一直存在著,只要一離開本頁面或者是重新載入後,
就也沒有任何正規的作法可以讓我取得 open.html 的子視窗物件參考...
我唯一能做的就是再執行一次 window.open() 重新載入子視窗一遍...

取回原有物件參考?

這樣子的作法很沒有效率,既耗電腦資源、又耗頻寬...
因為子視窗原本的狀態沒辦法繼續利用、而所有的元件又得重新載入...
所以我希望:「不管母視窗離開去哪、只要回到原有頁面就可以取回與子視窗的物件參考

很奇妙的 Trick

網路上搜尋了很久,有人提議用 HTML5 的 localStorage、還有 Cookie 去暫存 window 物件參考...
不過光看就覺得很詭異,能將 Native 的 window 物件儲存嗎?我心裡很懷疑...
我自己還有想說是否可以用 HTML5 postMessage 達成,不過語法本身就打槍我了 :p
targetWindow.postMessage() 得先取得目標視窗的物件參考... 這就做不到了...

最後是在國外的一個技術論壇 Re: Parent/Child Windows References 找到一個很妙的解法,就是在真正的 window.open() 前先做一次網址為空的 window.open()

win = window.open("", "new_window", "width=300,height=500");

若網址為 about:blank 的話,表示子視窗不存在,得再呼叫一次 window.open() 真的打開。
反之則表示子視窗已經存在,什麼事都不用做,物件參考已經被建立回來了!

這種 Trick 的唯一限制就是要先定好子視窗的名稱(上方的 new_window)。
不管你怎麼 Unload 甚至此分頁根本沒開啟過子視窗,都可以用此方法連結起來!


實作範例


Comments

  1. Ensky 2011-08-01 17:33:41
    真的很神奇XD
  2. 阿葉 2011-07-30 13:55:02
    居家網路工作 只要您會上網 每日在家工作2~4小時
    不影響正職工作,多增加一份額外收入
    點我免費報名體驗 http://wahez.weebly.com
  3. V tw 2011-06-30 18:33:28
    感覺是很好用的東西 thanks for your sharing!
  4. Jerry Qu 2011-06-28 01:29:21
    非常神奇,之前都用利用Cookie或者flash来通讯。
    http://qgy18.imququ.com/lab/sync/
  5. clonn 2011-06-28 00:23:02
    好神奇的解法,為什麼會這樣子!?
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment