判斷瀏覽器是否為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: MSIEIE>=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,就會發現已經更改數值了

結論

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

--

--

--

https://blog.yyisyou.tw/ — Web developer, Travel

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yang Yang

Yang Yang

https://blog.yyisyou.tw/ — Web developer, Travel

More from Medium

What is seasonal affective disorder (SAD)?

What is it like to change your name?

Deeper>Faster