JavaScript-BOM浏览器对象模型

Window

Navigator

Location

History

Screen

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

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

Window

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

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

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

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

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

Navigator

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

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

Location

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

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

History

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
    function goBack()
    {
        window.history.back()  //history.back() 方法加载历史列表中的前一个 URL。
    }
    function goForward()
    {
        window.history.forward()  //history forward() 方法加载历史列表中的下一个 URL。
    }
</script>
</head>
<body>

      <input type="button" value="Back" onclick="goBack()">  //向前
      <input type="button" value="Forward" onclick="goForward()">  //向后
</body>
</html>

Screen

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

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

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

原文链接：https://blog.csdn.net/promsing/article/details/110201054

JavaScript-BOM浏览器对象模型

Window

Navigator

Location

History

Screen

热门标签