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

前言

在撰寫網頁的時候，可能有些情境需要判斷使用者是使用哪些瀏覽器，並且做其他額外的動作。這裡將會介紹如何判斷。
另外可參考如何搭配前端框架設計出支援IE/Edge的網頁

取得瀏覽器資訊

最簡單的方式就是使用

1	window.navigator.userAgent

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

1	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同理
例如：

現今流行的瀏覽器
Chrome在console輸入document.documentMode會取得undefined
!!undefined = !true = false

舊版的瀏覽器
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>