判斷瀏覽器是否為IE/Edge的方式

在撰寫網頁的時候，可能有些情境需要判斷使用者是使用哪些瀏覽器，並且做其他額外的動作。這裡將會介紹如何判斷。

另外可參考 如何搭配前端框架設計出支援IE/Edge的網頁

取得瀏覽器資訊

最簡單的方式就是使用

window.navigator.userAgent

你可以先打在瀏覽器的開發者模式的console上查看

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

瀏覽器的版本

以MicroSoft的產品來說，瀏覽器會因為版本的關係，而夾帶不同的字串

我這邊整理了一部份的資訊

IE<=10: MSIE
IE>=11: Trident/
Edge, HTML based: Edge/
new Edge, chromium based: Edg/

這邊要注意的是，目前微軟主推的是new Edge，他的架構跟以前的產品是不一樣的，因此如果你需要針對舊版本的瀏覽器進行開發除錯的話，需要下載Edge 12–18的版本。

判斷瀏覽器

這邊主要是針對取得的資訊，是否夾帶我要的字串進行判斷

補充：IE11以下可能會有ES6的問題，以下是舉例，如果想要解決這方面的問題的話，可以參考react-app-polyfill

browserHandler = () => {
  let userAgent = window.navigator.userAgent;
  let isIE = (userAgent.indexOf('MSIE') > 0) || (userAgent.indexOf('Trident/') > 0);
  let isEdge = userAgent.indexOf('Edge/') > 0;
  this.setState({
    showModal: isIE || isEdge
  });
}

另外我看到國外有其他寫法，因此也可以再加上進行判斷

可以這樣判斷是因為現今流行的瀏覽器不支援這些渲染方式了

以前是根據documentMode取得的版本來進行不同的渲染，Edge同理

例如：

1. 現今流行的瀏覽器

Chrome在console輸入document.documentMode會取得undefined

!!undefined = !true = false

2. 舊版的瀏覽器

IE10在console輸入document.documentMode會取得10

!!10 = !!true = !false = true

browserHandler = () => {
  let userAgent = window.navigator.userAgent;
  let isIE = (userAgent.indexOf('MSIE') > 0) || (userAgent.indexOf('Trident/') > 0) || !!document.documentMode;
  let isEdge = userAgent.indexOf('Edge/') > 0 || !!window.StyleMedia;
  this.setState({
    showModal: isIE || isEdge
  });
}

小範例

我這邊是以Ant-Design的套件舉例，可以使用Modal提醒該換瀏覽器了

另外我這邊沒有放onCancel，所以不會有取消的功能

changeBrowserHandler = () => {
  window.open('https://www.google.com/intl/zh-TW/chrome/', '_blank');
}
<Modal
  visible={this.state.showModal}
  title="無法支援瀏覽器"
  onOk={this.changeBrowserHandler}
  footer={[
<Button key="submit" type="primary" onClick={this.changeBrowserHandler}>
    下載 Google Chrome
  </Button>
]}
>
  <p>請使用其他瀏覽器操作，或點擊下方連結下載安裝 Google Chrome 瀏覽器</p>
</Modal>

測試

其實Safari就提供了一個很方便的功能給大家進行測試了

補充：這個只有更改數值而已，不能針對每個瀏覽器的情境測試

1. 首先打開Safari，打開進階或是按 command+ ,

勾選 在選單列中顯示開發選單

2. 在瀏覽器上方選擇開發->使用者代理->選擇瀏覽器

3. 打開網頁檢閱器（開發者工具）

4. 打開console輸入window.navigator.userAgent，就會發現已經更改數值了

結論

如果真的遇到無法解決舊版瀏覽器的問題，建議還是不要花太多時間在研究，畢竟使用的人數只會越來越少而已，還是建議花多點時間在開發上比較有效益。