dva框架兼容ie瀏覽器常見問題

基於dva框架兼容IE瀏覽器常見問題收錄

1、打開瀏覽器出現空白,控制檯報錯“對象不支持“startsWith”屬性或方法”

  解決方案:

  a、安裝babel-polyfill    

npm install babel-polyfill --save

 b、index.js入口文件頂部引用 
      import 'babel-polyfill';

2、IE瀏覽器GET請求緩存問題(同一個get請求相同參數會直接從緩存中拿)

方案一:
   在get請求後面添加一個參數 t= 時間戳
   t = new Date().getTime();

方案二:
   請求頭中加:
   ['Cache-Control'] = 'no-cache';
   ['Pragma'] = 'no-cache';

3、在jsx中單獨爲特定瀏覽器設置樣式

檢測瀏覽器類型方法:

// 獲取瀏覽器類型
   function getBrowserType() {
	  const userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
	  const isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
	  const isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera || userAgent.indexOf("rv:11") > -1; //判斷是否IE瀏覽器
	  const isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判斷是否IE的Edge瀏覽器
	  const isFirefox = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
	  const isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1; //判斷是否Safari瀏覽器
	  const isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判斷Chrome瀏覽器
	  if (isIE) {
		if(userAgent.indexOf("rv:11") > -1) {
		  return 'IE11';
		}
		if(userAgent.indexOf("rv:12") > -1) { //這一段還沒驗證
		  return "IE12";
		}
		const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
		reIE.test(userAgent);
		const fIEVersion = parseFloat(RegExp["$1"]);
		if (fIEVersion === 7) {
		  return "IE7";
		} else if (fIEVersion === 8) {
		  return "IE8";
		} else if (fIEVersion === 9) {
		  return "IE9";
		} else if (fIEVersion === 10) {
		  return "IE10";
		} else if (fIEVersion === 11) {
		  return "IE11";
		} else if (fIEVersion === 12) {
		  return "IE12";
		} else {
		  return "0"; //IE版本過低
		}
	  } //isIE end
	  if (isFirefox) return "FF";
	  if (isOpera) return "Opera";
	  if (isSafari) return "Safari";
	  if (isChrome) return "Chrome";
	  if (isEdge) return "Edge";
	}

eg:

// 判斷瀏覽器類型是否爲ie
   const isIE = getBrowserType().includes('IE');
   <div style={{color: `${isIE ? '#FFFFFF' : '#000000'}`}}>ie中字體白色</div>

-----------未完待續,後續持續更新-------------

小夥伴們感覺有幫助的話希望點個贊喲,如果有問題或疑問歡迎大家評論區留言,看到後第一時間回覆。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章