02.BOM.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script>
  9. /**
  10. * BOM
  11. * -浏览器对象模型
  12. * -BOM可以使我们通过JS来操作浏览器
  13. * -在BOM中为我们提供了一组对象,用来完成对浏览器的操作
  14. * -BOM对象
  15. * Window
  16. * -代表的是整个浏览器的窗口,同时window也是网页中的全局对象
  17. * Navigator
  18. * -代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
  19. * Location
  20. * -代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,
  21. * 或者操作浏览器跳转页面
  22. * History
  23. * -代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
  24. * 由于隐私原因,该对象不能获取到具体的历史记录,只能
  25. * 操作浏览器向前或向后翻页,而且该操作只在当次访问有效
  26. * Screen
  27. * -代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关信息
  28. * 这些BOM对象在浏览器中都是作为window对象的属性来保存的,
  29. * 可以通过window对象来使用,也可以直接使用
  30. */
  31. // console.log(window.navigator);
  32. // console.log(navigator);
  33. // console.log(location);
  34. // console.log(history);
  35. /**
  36. * Navigator
  37. * -代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
  38. * -由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
  39. * -一般我们只会用userAgent来判断浏览器的信息
  40. * userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,
  41. * 不同的浏览器会有不同的userAgent
  42. * 火狐的userAgent
  43. * Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0
  44. * 谷歌(Chrome)浏览器的userAgent
  45. * Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
  46. * Edge中的userAgent
  47. * Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 Edg/100.0.1185.50
  48. * -在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过
  49. * userAgent来识别一个浏览器是否是IE了
  50. */
  51. // alert(navigator.appName);
  52. var ua = navigator.userAgent;
  53. // console.log(ua);
  54. // if (/firefox/i.test(ua)) {
  55. // alert("火狐浏览器");
  56. // }else if(/Chrome/i.test(ua)){
  57. // alert("谷歌浏览器");
  58. // }else if(/msie/i.test(ua)){
  59. // alert("IE浏览器");
  60. // };
  61. /**
  62. * 如果通过userAgent不能判断,还可以通过一些浏览器中特有的对象,
  63. * 来判断浏览器的信息
  64. * 比如:ActiveXObject
  65. */
  66. // if(window.ActiveXObject){
  67. // alert('IE浏览器');
  68. // }else{
  69. // alert('不是IE浏览器');
  70. // };
  71. // alert(window.ActiveXObject);
  72. //把window.ActiveXObject转换成布尔值
  73. // alert(!!window.ActiveXObject);
  74. // alert("ActiveXObject" in window);
  75. if (/firefox/i.test(ua)) {
  76. alert("火狐浏览器");
  77. } else if(/Chrome/i.test(ua) && /Edg/i.test(ua)){
  78. alert('Edge浏览器');
  79. }else if (/Chrome/i.test(ua)) {
  80. alert("谷歌浏览器");
  81. } else if (/msie/i.test(ua)) {
  82. alert("IE浏览器");
  83. }else if("ActiveXObject" in window){
  84. alert("IE浏览器");
  85. };
  86. </script>
  87. </head>
  88. <body>
  89. </body>
  90. </html>