JavaScript Window Navigator

window.navigator 对象包含有关访问者的信息。


Window Navigator

window.navigator 对象可以不带 window 前缀来写。

一些例子:

  • navigator.appName
  • navigator.appCodeName
  • navigator.platform

浏览器 Cookie

cookieEnabled 属性返回 true,如果 cookie 已启用,否则返回 false:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>如果启用了 cookie,则 cookieEnabled 属性返回 true:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. "navigator.cookieEnabled 是:" + navigator.cookieEnabled;
  10. </script>
  11. </body>
  12. </html>

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>appName 属性返回浏览器的应用程序名称:</p>
  6. <p id="demo">
  7. <p>奇怪的是,“Netscape” 是 IE11、Chrome、Firefox 和 Safari 的应用程序名称。</p>
  8. <script>
  9. document.getElementById("demo").innerHTML =
  10. "navigator.appName 是:" + navigator.appName;
  11. </script>
  12. </body>
  13. </html>

很陌生吧,"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。


浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript Navigator 对象</h1>
  5. <p>appCodeName 属性返回浏览器的代码名称。</p>
  6. <p>不要依赖它! “Mozilla” 是 Chrome、Firefox、IE、Safari 和 Opera 的应用程序代码名称。</p>
  7. <p id="demo">
  8. <script>
  9. document.getElementById("demo").innerHTML =
  10. "navigator.appCodeName is " + navigator.appCodeName;
  11. </script>
  12. </body>
  13. </html>

"Mozilla" 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。


浏览器引擎

product 属性返回浏览器引擎的产品名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>product 属性返回浏览器的产品名称。</p>
  6. <p>不要依赖它!大多数浏览器都将 “Gecko” 作为产品名称返回!</p>
  7. <p id="demo">
  8. <script>
  9. document.getElementById("demo").innerHTML =
  10. "navigator.product 是:" + navigator.product;
  11. </script>
  12. </body>
  13. </html>

浏览器版本

appVersion 属性返回有关浏览器的版本信息:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>appVersion 属性返回有关浏览器的版本信息:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML = navigator.appVersion;
  9. </script>
  10. </body>
  11. </html>

浏览器代理

userAgent 属性返回由浏览器发送到服务器的用户代理报头(user-agent header):

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>userAgent 属性返回浏览器发送给服务器的用户代理标头:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. navigator.userAgent;
  10. </script>
  11. </body>
  12. </html>

注意事项

来自 navigator 对象的信息通常是误导性的,不应该用于检测浏览器版本,因为:

  • 不同浏览器能够使用相同名称
  • 导航数据可被浏览器拥有者更改
  • 某些浏览器会错误标识自身以绕过站点测试
  • 浏览器无法报告发布晚于浏览器的新操作系统

浏览器平台

platform 属性返回浏览器平台(操作系统):

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>platform 属性返回浏览器平台(操作系统):</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. "navigator.platform 是:" + navigator.platform;
  10. </script>
  11. </body>
  12. </html>

浏览器语言

language 属性返回浏览器语言:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>language 属性返回浏览器的语言:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. "navigator.language 是:" + navigator.language;
  10. </script>
  11. </body>
  12. </html>

浏览器是否在线?

onLine 属性返回 true,假如浏览器在线:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>如果浏览器在线,则 onLine 属性返回 true:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. "navigator.onLine 是:" + navigator.onLine;
  10. </script>
  11. </body>
  12. </html>

判断是否是移动端浏览器

用 javascript 判断是PC端还是移动端,可以根据不同情况,执行不同的操作。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Navigator 对象</h1>
  5. <p>如果浏览器在线,则 onLine 属性返回 true:</p>
  6. <p id="demo">
  7. <script>
  8. // 判断是否为移动端
  9. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  10. document.write("移动")
  11. } else {
  12. document.write("PC")
  13. }
  14. </script>
  15. </body>
  16. </html>

当然,还可以在上述例子的基础上,判断是安卓浏览器还是IOS浏览器。

  1. var u = navigator.userAgent;
  2. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  3. if(isiOS){
  4. console.log("IOS");
  5. }else{
  6. console.log("安卓");
  7. }

分类导航