問題:
公司有個專案,功能很簡單,讀取業務資料,展示在頁面上。
一個很簡單的問題,卻因為目標瀏覽器是IE9,卡了三天。
前端給的反饋是:
在IE9下,程式一會兒對,一會兒不對……第一次刷不出來,多刷幾次就刷出來了。
這些話,聽著就覺得怪,如果聽之任之,就成了不明就裡一筆糊塗賬。
於是,我開始跟他們一起除錯,就在大家快要放棄的時候,我發現,這個“一會兒對,一會兒不對”跟console物件的引用有關,只要把引用了console物件的語句註釋掉,指令碼的執行結果就總是正確,反之,就“一會兒對,一會兒不對”。
BUG找到了,但我還是覺得這個console得徹底搞清楚,不然還得至少踩兩三年的坑。
Does IE9 support console.log, and is it a real function?
In Internet Explorer 9 (and 8), the console object is only exposed when the developer tools are opened for a particular tab. If you hide the developer tools window for that tab, the console object remains exposed for each page you navigate to. If you open a new tab, you must also open the developer tools for that tab in order for the console object to be exposed.
真不知道這傢伙從哪學會的祕籍,這麼詭異的現象,即便自己發現了,也不敢這樣總結。
結論:
IE9不能直接引用console
,一旦語句中出現console
引用,後面的程式碼就不再執行了,console
就像個黑洞,把光都吸走了,無影無蹤。
一旦你想要藉助Development Tools去除錯一下,看看是不是console
引用出了問題,IE9就會馬上建立一個console
物件,然後這個BUG就不見了!這時候你關掉Development Tools,console
依然還在……下次你再開啟新頁面,console
又成了黑洞。
如果沒有旁人的幫助,不大可能從這個坑裡爬出來的,我們只能告訴客戶,程式在IE9中執行的結果是“一會對,一會兒不對,好像是隨機的……”。
解決方法:
把window.console
複製給console
console = window.console || {};
然後再給這個空的console
物件,新增一些空的方法,讓它們在IE9以及其他不支援console的瀏覽器上不要拋異常,好讓我們的程式順利執行。