Javascript - Chrome/IE Javascript相容筆記(持續更新)

在這個瀏覽器戰爭中，受苦的永遠是開發人員，因為舊版瀏覽器有著JScirpt與Javascript的差異，又因為要顧慮到使用舊版瀏覽器的使用者，所以導致開發人員需要想辦法達到向下相容與跨瀏覽器相容的神境界，這篇是限量將開發前端網頁遇到的一些需要注意的Javascript相容性問題做個筆記，以後比較方便瀏覽。

console物件未定義

console物件是開發人員常用的訊息印出視窗的方法。在IE8/IE9上，console物件是只有當開發人員按下F12打開開發人員模式時才可以使用，否則是無法存取的，所以為了要符合IE8/IE9的情況，在使用console之前要先來判斷是不是有console物件再來寫log。

if(window.console) {
    console.log(...);
}

參考來源：
黑暗執行序 - 【笨問題】IE9的「console未被定義」錯誤

event.target為null

觸發Javascript事件時，在觸發的function中可以在this.event.target或this.event.currentTarget取得觸發該事件的DOM，然而這兩個屬性在舊版IE上取到的會是null，所以要改用event.srcElement屬性取得。在MDN官網上有說明到event.srcElement其實就是event.target的另一個簡稱，只是event.target沒有支援舊版IE。但是event.srcElement沒有支援FireFox，所以使用時要小心。


參考來源：
MDN - Event.srcElement

window.matchMedia無法使用

在實作RWD網頁時，如果碰到無法使用CSS調整的情況下，勢必要使用Javascript來偵測裝置螢幕大小來進行調整。Javascript提供了window.matchMedia的方式可以偵測media query list並觸發change事件。然而window.matchMedia只支援IE10以上，遇到這種情況有幾種方式可以解決。第一種方法，可以使用Modernizr，Modernizr是個第三方Library，支援許多Browser無法提供的功能，也可偵測Browser。使用Modernizr.mq可以判斷media query list。第二種方法，使用matchMedia.js，matchMedia是網友寫的Library，載入後就可以套用原本的寫法使用matchMedia。
matchMedia寫法

var m = window.matchMedia('screen and (max-width: 400px)');
m.onchange = function() {
    if (this.matches){
        console.log('small')
    }else{
        console.log('large')
    }
};
m.onchange();

Date.parse()與new Date()轉換日期字串(含毫秒)錯誤

在轉換日期字串為日期物件時常常會用到Date.parse()轉換成毫秒來檢查是否為日期格式，如果回傳NaN就代表字串為不合法的格式；或者直接用new Date()傳入字串轉成日期物件，如果回傳Invalid Date代表轉換錯誤。在用ISOString轉換的時候，格式為yyyy-mm-ddThh:mm:ss.fffZ，對於Chrome與IE而言，秒以上的格式管控很嚴謹，少一個位數就會造成錯誤格式，例如2016-06-06改用2016-6-6，這樣一定不行。但是Chrome跟IE的差異在於Chrome對毫秒的管控竟然比較鬆，例如使用new Date('2016-06-06T04:21:33.8')是可以正常轉換的，但同樣的字串放到IE上會發生錯誤，所以在進行日期字串的轉換時要特別注意毫秒的部分，可以透過補0或省略來確保正確轉換。



參考來源：
MDN - Window.matchMedia()
Modernizr: the feature detection library for HTML5/CSS3
GitHub - paulirish/matchMedia.js