在IE瀏覽器中執行OpenFlashChart的reload方法時沒法刷新的解決方法

　　因爲項目需求，須要在網頁上利用圖表展現相關數據的統計信息，採用了OpenFlashChart技術。OpenFlashChart是一款開源的以Flash和Javascript爲技術基礎的免費圖表，用它能建立一些頗有效果的報表分析圖表。最重要的是它是開源和免費的，支持多種語言。首先在官網上下載開發包，裏面包含了所需的flash文件、js文件以及多種語言的demo，這些demo寫的很是詳細，能夠進行參考開發。因爲項目使用.net來開發，因此我學習了一下開發包中對應的dotnet代碼，這個.net項目採用面向對象的方式對圖表進行了合理的分析，建立了一些與OpenFlashChart相對應的類，用來描述圖表信息，還編寫了相應的用戶控件，方便開發人員直接使用。

　 好了，廢話很少說了，開始說問題了（想了解具體開發技術可參考官網教程和示例代碼），因爲須要多角度全方位的展現圖標，那麼就必需要根據不一樣的要求動態刷新圖表信息，根據官網上的方法，可利用如下代碼：

 1 function reload()
 2 {
 3   tmp = findSWF("chart");
 4   
 5   //
 6   // reload the data:
 7   //
 8   x = tmp.reload();
 9   
10   //
11   // to load from a specific URL:
12   // you may need to 'escape' (URL escape, i.e. percent escape) your URL if it has & in it
13   //
14   x = tmp.reload("gallery-data-32.php?beer=1");
15   
16   //
17   // do NOT show the 'loading...' message:
18   //
19   x = tmp.reload("gallery-data-32.php?beer=1", false);
20 }
21 
22 function findSWF(movieName) {
23   if (navigator.appName.indexOf("Microsoft")!= -1) {
24     return window["ie_" + movieName];
25   } else {
26     return document[movieName];
27   }
28 }

經過調用reload方法來實現圖標刷新，按照這種方式寫完代碼後運行，在chrome中果真能夠達到預想中的效果，然而，IE給我潑了一盆冷水，報出了錯誤：沒法獲取屬性「reload」的值: 對象爲 null 或未定義，甚至官網上點擊「reload」時也會報錯（以下圖），這下我桑心了，估計很差解決了。

 

沒辦法，問題總要處理。通過查看，發現錯誤的主要緣由在於findSWF方法返回的對象爲null，也就是說在IE中經過 window["ie_" + movieName] 沒法獲得flash實例，這個方法是做者本人寫的，目的就是爲了兼容IE，由於官網上的描述是：IE中的圖表ID跟firefox不一樣，所以前面加上了"ie_"，不知道爲何很差使。而後我就在網上各類搜索，但願能找到方法，這個問題也確實有不少人遇到，但都沒有給出很好的解決方法，無奈之下，我只有進行變通處理，即：在刷新時銷燬掉以前的flash對象，從新進行加載，並傳入相應的json數據。這種方法也能夠實現所需的功能，可是因爲我銷燬flash對象的手段僅僅是經過刪除包含該flash對象的div元素，我總感受這種方法可能沒有真正的將flash對象刪除，由於我在網上看到有的人經過此方法刪除外層div元素後，裏面的flash仍然還在執行相應的操做，一旦狀況確實如此，那麼每刷新一次就會構造出一個新的flash對象，這樣的話若是刷新頻繁就會形成內存的消耗不斷增加，顯然，考慮到這個狀況，這種實現方法是行不通的。這下我又陷入了麻煩中，若是這個問題解決不了的話可能就會換用其餘技術來實現，那我以前話費時間研究OpenFlashChart就算是作了無用功了，再想一想吧，總感受有解決方法。忽然之間，我想到了以前作文件上傳時用到了swfupload技術，這也是利用flash對象來實現相關功能的，我打開源碼，看看該組件是怎麼處理IE的兼容問題的，但願能從中發現一些端倪，通過一番查看，終於在「SWFUpload.prototype.loadFlash」方法中發現了一段話：

// Fix IE Flash/Form bug
    if (window[this.movieName] == undefined) {
        window[this.movieName] = this.getMovieElement();
    }

從註釋上看這段代碼是爲了處理IE bug的，而後繼續查看this.getMovieElement()方法：

// Public: get retrieves the DOM reference to the Flash element added by SWFUpload
// The element is cached after the first lookup
SWFUpload.prototype.getMovieElement = function () {
    if (this.movieElement == undefined) {
        this.movieElement = document.getElementById(this.movieName);
    }

    if (this.movieElement === null) {
        throw "Could not find Flash element";
    }
    
    return this.movieElement;
};

原來獲取flash對象就是經過最經常使用的getElementById方法，這裏的movieName就是flash對象的id值，看到這裏，我趕忙將findSWF方法中的代碼進行了以下修改：

function findSWF(movieName) {
    // Fix IE Flash/Form bug
    if (window[movieName] == undefined) {
         window[movieName] = document.getElementById(movieName);
    }
    return window[movieName];
}

修改後在chrome瀏覽器、IE瀏覽器（正常視圖和兼容性視圖）和360瀏覽器（極速模式和兼容模式）上運行，果真都達到了預期的效果，至此，問題解決！