1. 程式人生 > >js之瀏覽器相容性

js之瀏覽器相容性

1、ie瀏覽器不支援函式預設值

  hi('李四');
  function hi(msg = '張三'){
	alert(msg);
  }    

 此函式在火狐、谷歌等瀏覽器下均沒問題,唯獨在萬惡的ie瀏覽器下會提示如下錯誤:

為什麼會出現這樣的問題呢?

在ES6之前,不能直接為函式的引數指定預設值,Chrome,Firefox,Safari等瀏覽器對es6支援較好,所以沒有報錯,而萬惡的ie對es6支援的很差勁,所以會報錯

  • Chrome:51 版起便可以支援 97% 的 ES6 新特性。
  • Firefox:53 版起便可以支援 97% 的 ES6 新特性。
  • Safari:10 版起便可以支援 99% 的 ES6 新特性。
  • IE:Edge 15可以支援 96% 的 ES6 新特性。Edge 14 可以支援 93% 的 ES6 新特性。(IE7~11 基本不支援 ES6)

如何解決此問題呢?只能採取變通的方法

  hi();
  function hi(msg){
	msg = msg || '張三';
	alert(msg);
  }

 這種寫法有一種致命的缺點:

那就是如果引數msg賦值了,但是對應的布林值為false,則該賦值不起作用,如果在呼叫函式的時候,傳入的引數是一個空字元傳,那麼msg就會被修改為預設值;

那又如何避免這個問題呢?需要先判斷一下

1、arguments.length是否為1

2、判斷值是否為undefined

修改後的完整程式碼?

    hi(" ");
    function hi(msg){
	msg = arguments.length && arguments[0] != undefined ? msg : '張三';
	alert(msg);
    }

 

2、關於事件的相容性處理

document.onkeydown = function(event){
  //相容IE和Firefox獲得keyBoardEvent物件  
  event = event ? event : ((window.event) ? window.event : ""); 
   
   //相容IE和Firefox獲得keyBoardEvent物件的鍵值
  var key = event.keyCode ? event.keyCode : event.which; 
		
  if(key == 13){
	alert("hello wolrd");
  }
};