AngularJS進階(三十五)瀏覽器相容性解決之道

阿新 • • 發佈：2018-11-04

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

瀏覽器相容性解決之道

前言

瀏覽器相容性一直是前端開發中不得不面對的一個問題。而最突出的就是IE。對絕大多數公司來說，相容IE6的價效比已經很低，而IE7則幾乎已經絕跡。所以，常見的相容性下限是IE8。這也正是Angular1.2x的相容性目標，Angular團隊宣告：Angular的持續整合伺服器會在IE8下執行所有的測試。但這些測試不會執行在IE7及以下版本，它們也不會保證Angular將會工作在這些IE版本上。

而1.3以後的版本，Angular官方不再保證對IE8的相容。當然，這並不表示一定不能在IE8用，但是官方不在針對IE8對整合測試，如果確實需要在相容IE8的同時使用1.3，就需要自己做全面測試。不過，這樣做的話價效比比較低。所以，在工程實踐中，一般以IE8為分界，如果需要相容，就用1.2，否則就用1.3+。

在專案開發過程中，自己一直都是在Chrome瀏覽器中開發、除錯服務端管理前臺。後期測試階段，Boss提出要做到主流瀏覽器(例如：360瀏覽器、qq瀏覽器、IE)相容。這個要求還是很合理的。經過測試360、qq、UC、火狐等瀏覽器均不存在所謂的相容性問題。最令人頭大的就是IE。不過，我堅信:是問題就可以得到解決。

測試環境:

Angular版本 : angular-1.3.0.14

Jquery版本：jquery-1.9.1

瀏覽器版本 : IE10

解決

初次嘗試設定IE10的相容性選項，無解。

IE不相容問題是程式中呼叫jquery，搶佔了$的原因。解決方案如下:

1.JQuery方案

1.1 頁面引入jquery.js庫

1.2 新增兩個js函式

新增LockTableHead()和translate()函式。

注意：為防止JQuery與現有js框架搶奪$識別符號，要執行jQuery.noConflict()。

function LockTableHead(divId, tableId) {var jq = jQuery.noConflict();    jq("#" + divId).scroll(function () {        var delta = jq("#" + divId).scrollTop();        if (delta > 0) {            translate(jq("#" + tableId +" th"), 0, delta - 2);        }        else {            translate(jq("#" + tableId + " th"), 0, 0);        }    });}function translate(element, x, y) {    var translation = "translate(" + x + "px," + y + "px)"     element.css({        "transform": translation,        "-ms-transform": translation,        "-webkit-transform": translation,        "-o-transform": translation,        "-moz-transform": translation    });}

1.3 修改頁面，呼叫js

在適當的地方新增LockTableHead()函式呼叫即可。如下：

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意：要提供一個div的id和table的id 。

2.非JQuery方案(純js)

2.1 思路

受JQuery方案的啟發，將它翻譯回普通js即可。

2.2 新增js函式

新增LockTableHead()函式。

function LockTableHead(divId, tableId) {document.getElementById(divId).onscroll = function () {var delta = document.getElementById(divId).scrollTop;var t1 = "translate(0px," + delta + "px)";th_Array=document.getElementById(tableId).getElementsByTagName("th");for (i = 0; i < th_Array.length; i++) {th_Array[i].style["-ms-transform"] = t1;}};}

2.3 修改頁面，呼叫js

同上，在適當的地方新增LockTableHead()函式呼叫即可。如下：

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意：要提供一個div的id和table的id 。

3.總結

以上兩方案實際上都是使用了css3中的translate函式，這就意味著瀏覽器得支援這個功能是前提條件。

另外，如果頁面上只有一個table，也可以通過getElementsByTagName的方式定位table，並用parentNode的方式定位div，這樣就不必傳遞它們的id了。

以上方法貌似只是解決瀏覽器區域性相容性問題。對於全面相容不適用。

IE瀏覽器相容性問題真的難倒自己了。始終找不到一個好的解決方案。錯誤提示如下:

居然有個物件是沒定義的？！

Object.keys方法是ES5中的函式。IE8不支援。

自己根據提示修改了lodash.js檔案中的L083，L229,將其進行了註釋。並引入了es5-shim.js檔案。

是否需要考慮一下瀏覽器的核心？

注：

Google Chrome是採用Chrome核心，基於開源核心chromium。開啟網頁的速度快，且很安全，效能極佳，介面簡潔，功能多，但相容性有待提高。

Internet Explorer是採用IE核心，開啟網頁的速度一般，安全性一般，但相容性極高，介面簡單，功能較少。

暫時擱置....歡迎能夠解決此問題的朋友留言。

參考文獻

1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

2.http://blog.csdn.net/jumtre/article/details/50380311

3.http://www.jb51.net/article/52583.htm

4.http://www.jb51.net/article/45428.htm

美文美圖

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

AngularJS進階(三十五)瀏覽器相容性解決之道

瀏覽器相容性解決之道

前言

測試環境: