更遠

最近做了一個純 JS 與 HTML 的專案。

一開始使用 chrome 開發與測試，要上線的時候，開始測試其他的瀏覽器，

發現在 IE 9 跟 IE 11 ( 沒測試過 IE 10 )，

常常會出現一個「無法執行已被釋放的 Script 代碼」的錯誤，

上網找了半天，又找不到解法，

後來回頭看整份 code，才大概知道原因可能是什麼。

先簡單解釋整個專案的架構，

基本上站台是有一個 Main Content，中間嵌了一個 iframe。

Main Content 上面有許多 menu，menu點下之後，iframe 會直接把自己的頁面砍掉，換成其他 src，

而這個 JS error 常常是發生在第二次重新進入同一個 src 時產生的。

後來發現原因可能為，

在每一個頁面 ( 嵌在iframe裡) 產生的時候，會建立一些屬於這頁面的 object 及 取得上一次使用者設定過的參數，

在頁面要 destroy 之前，程式的流程，會把頁面設定過的一些參數，

丟到 Main Content 裡面 cache 起來，等到下次再進來此頁面時，再傳進來。

( 第一次則因為 Main Content 無 cache，所以會直接從 server side 利用 ajax 方式取得 )

存的方式很簡單，

cache[page_name] = page_params_obj;

然後拿的方式也很簡單，

return cache[page_name];

我個人猜測問題就出在這裡，在一個頁面建立的 obj 或 操作過的 obj，

當頁面消失的時候，應該會跟著被釋放，

但此時外層 Main Content 已經 cache 住的 obj pointer 指到的位置。

當頁面重新載入的時候，頁面會向外層的 Main Content 要上次使用者設定的參數，

於是 Main Content 就將已經被釋放的 obj pointer 傳進來，

而此 obj 卻因為上一次頁面的消失而已經被釋放了，於是就出現了此 error。

後來用了一個簡單的解決方式，

在外層 Main content 要 cache 參數時，

直接建一份完整新的 obj，

cache[page_name] = $.(true, {}, page_params_obj);

(此行 JS 利用了 jQuery )

避免第二次進入同一頁面時，傳進去的 obj 已經被釋放了。