JavaScript基础——BOM浏览器对象模型

墨蓝 2021-09-25 00:22 479阅读 0赞

目录

Window

Navigator

Location

History

Screen

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。BOM可以使我们通过js来操作浏览器

在BOM中为我们提供了一组对象，用来完成对浏览器的操作 。

Window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象 。重要属性如下

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

  1. <script>
  2.     window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  3.     window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
  4.     window.open() - 打开新窗口
  5.     window.close() - 关闭当前窗口
  6.     window.moveTo() - 移动当前窗口
  7.     window.resizeTo() - 调整当前窗口的尺寸
  8. </script>

Navigator

代表的当前浏览器的信息，通过该对象可以用来识别不同的浏览器。重要属性如下

  1. <script>
  2.     txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
  3.     txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
  4.     txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
  5.     txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
  6.     txt+= "<p>硬件平台: " + navigator.platform + "</p>";
  7.     txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
  8.     txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
  9.     document.getElementById("example").innerHTML=txt;
  10. </script>

Location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

  1. <script>
  2.     location.hostname   //返回 web 主机的域名
  3.     location.pathname   //返回当前页面的路径和文件名
  4.     location.port  //返回 web 主机的端口 （80 或 443）
  5.     location.protocol   //返回所使用的 web 协议（http: 或 https:
  6. </script>

History

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且浏览器关闭后有效

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <head>
  6. <script>
  7.     function goBack()
  8.     {
  9.         window.history.back()  //history.back() 方法加载历史列表中的前一个 URL。
  10.     }
  11.     function goForward()
  12.     {
  13.         window.history.forward()  //history forward() 方法加载历史列表中的下一个 URL。
  14.     }
  15. </script>
  16. </head>
  17. <body>
  19.       <input type="button" value="Back" onclick="goBack()">  //向前
  20.       <input type="button" value="Forward" onclick="goForward()">  //向后
  21. </body>
  22. </html>

Screen

代表用户的屏幕 的信息，通过该对象可以通过获取用户的显示器的相关的信息。重要属性如下

  1. <script>
  2. document.write("可用宽度: " + screen.availWidth);
  3. document.write("可用高度: " + screen.availHeight);
  4. </script>

如果本篇博客对您有一定的帮助，大家记得留言+点赞哦。

发表评论

表情：
评论列表 （有 0 条评论，479人围观）

还没有评论，来说两句吧...

相关阅读