?? 作者：極客小俊
?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

前言 ??

ietest現(xiàn)在是不是不好用了? ?Edge瀏覽器仿真是不是不見了？

如圖

如果我們在前端開發(fā)javascript遇見一些老舊的語法標準，想要測試一下都難，想想都抓狂!????

不過不用擔心，經(jīng)過這幾天的資料查閱，我還是找到了一個解決辦法來模擬舊版IE內(nèi)核,

其實根據(jù)微軟官方給出的資料IE模式在 Windows 10版本上都是可用的!

只需要幾步我們就可以調(diào)出Edge瀏覽器的IE內(nèi)核測試功能!

設(shè)置Edge ??

這里我以win10為例, 打開你當前最新安裝的Edge瀏覽器, 并且切換到設(shè)置選項

如圖

來到設(shè)置選項之后，我們選擇默認瀏覽器

然后在右側(cè)的運行在Internet Explorer模式下重新加載網(wǎng)站(IE模式)這一欄，我們選擇允許

如圖

接下來我們選擇外觀選項， 然后在右側(cè)往下拉

找到Internet Explorer模式(IE模式)按鈕這個選項，把旁邊開關(guān)打開!

如圖

這樣設(shè)置以后,你就會發(fā)現(xiàn)右上角會多一個ie瀏覽器小圖標

如圖

Edge開啟IE內(nèi)核模式 ??

我們再來打開一個web頁面,并且開啟IE內(nèi)核模式看看效果!

比如我們用Edge打開一個頁面之后，再點擊右上角的ie瀏覽器小圖標即可開啟IE內(nèi)核模式

如圖

在彈出的對話框中選擇完成即可!

Edge在IE模式中使用調(diào)試工具 ??

當你在Edge中使用了IE模式之后，你可能會發(fā)現(xiàn)開發(fā)工具不能用了!

即便是你按下快捷鍵F12就會提示如下信息!

如圖

其實你也不要慌張，它這里不是提示了有一個了解詳細信息的鏈接嗎! 我們點擊進去!

就進入到微軟官方所給的解決方案!

地址: https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/ie-mode

那么這時候我們要打開調(diào)試工具怎么辦呢

這個時候我們可以打開運行對話框，你也可以按快捷鍵 win徽標鍵 + R

然后輸入以下代碼:

%systemroot%\system32\f12\IEChooser.exe


如圖

單擊確定, 我們就可以打開IE模式下的調(diào)試工具了

然后根據(jù)需求在IEChooser中選擇IE模式選項卡對應(yīng)的文檔即可進行調(diào)試!

最后我們就可以在這里進行調(diào)試，和選擇IE模式的種類了!

如圖

代碼測試 ??

有了IE內(nèi)核測試功能，我們在做前端測試的時候，就可以很方便的去測試一些比較老舊的標準或代碼，以便于和現(xiàn)在最新的標準做比較!

使用javascript判斷當前用戶使用的是什么瀏覽器

當我們開發(fā)網(wǎng)頁的時候，經(jīng)常會遇到瀏覽器兼容性問題

對于不同的瀏覽器環(huán)境，我們可以通過javascript代碼進行判斷和處理。

在js中，我們可以通過navigator.userAgent的api獲得瀏覽器的一些信息,也就是瀏覽器標識符。

該字符串包含了瀏覽器名稱、版本號、操作系統(tǒng)等信息，然后再通過正則表達式來過濾字符串判斷不同瀏覽器,大概思路就是這樣子!

比如我們可以通過navigator.userAgent拿到ie5、ie7、ie8、ie9、ie10、ie11的瀏覽器信息!

然后我們就可以利用Edge中的IE模式來模擬這幾種ie瀏覽器的信息!

打印所獲取到的信息如下:

正則表達式判斷當前瀏覽器是否為ie瀏覽器內(nèi)核, 然后在這個基礎(chǔ)之上再判斷當前是哪個ie瀏覽器內(nèi)核

打印測試結(jié)果如下圖

如圖

測試結(jié)果為在其他瀏覽器是不會彈出這個警告框的,但是在ie瀏覽器內(nèi)核下就會彈出警告框!

然后我們再來區(qū)分以下不同的ie版本

通過仔細觀察規(guī)律你會發(fā)現(xiàn)ie5和ie7的瀏覽器信息都一樣ie8、ie9、ie10這幾個瀏覽器內(nèi)核中的MSIE后面所跟的版本數(shù)字是不同的,至于ie11你可以用排除法，處理了其他ie瀏覽器，剩下的就是這個ie11

簡單規(guī)劃一下代碼如下:

如圖

從navigator.userAgent獲取到的firefox、opera、Edge、Chrome這幾個瀏覽器信息如下:

仔細觀察，里面基本上都有自己獨特的地方,那么我們也可以拿到代碼中進行過濾判斷!

代碼

使用javascript獲取當前元素css樣式

我們可以使用Edge模擬IE內(nèi)核測試一下獲取css屬性的情況!

使用一個叫currentStyle屬性

元素節(jié)點對象.currentStyle.css樣式名稱;


舉個栗子

這里的currentStyle屬性 僅僅只是ie瀏覽器才支持的屬性 ,所以我們才要使用到Edge瀏覽器來進行模擬IE瀏覽器的內(nèi)核進行測試!

效果如圖

而chorme谷歌、Opera歐朋、FireFox火狐、Microsoft Edge這些瀏覽器是不支持的，在這些瀏覽器中使用currentStyle屬性會報Uncaught TypeError(未捕獲類型錯誤)的錯誤!

當然我們直接使用``getComputedStyle()`這個方法就可以解決這個問題，這里我就不過多贅述了!

大家的支持就是我堅持的動力!

如果文章對你有幫助的話就請

??點贊 ??評論 ??收藏

一鍵三連哦！

??????????

如果以上內(nèi)容有任何錯誤或者不準確的地方，????歡迎在下面 ?? 留個言指出!

或者你有更好的想法，歡迎一起交流學習????????????