JavaScript语法基础之window对象

苏苏渗透大师

于 2024-08-22 23:42:23 发布

阅读量762

点赞数 15

分类专栏： web渗透文章标签： javascript 前端服务器网络安全 web安全

本文链接：https://blog.csdn.net/m0_74249600/article/details/141440456

版权

web渗透专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.4.1. window.location.href

1. window 对象

1.1. window 对象简介

在 JavaScript 中，一个浏览器窗口就是一个 window 对象（这句话很重要）。

简单来说，JavaScript 会把一个窗口看成一个对象，这样我们就可以用这个对象的属性和方法来操作这个窗口。

实际上，我们每次打开一个页面时，浏览器都会自动为这个页面创建一个 window 对象。

window 对象存放了这个页面的所有信息，为了更好分类处理这些信息，window 对象下面又分为很多对象，如下图所示。

子对象	说明
`document`	文档对象，用于操作页面元素
`location`	地址对象，用于操作 URL 地址
`navigator`	浏览器对象，用于获取浏览器版本信息
`history`	历史对象，用于操作浏览历史
`screen`	屏幕对象，用于操作屏幕宽度高度

你没看错，document 对象也是 window 对象下的一个子对象。很多人以为一个窗口就是一个 document 对象，其实这个理解是错的。

因为一个窗口不仅仅包括 HTML 文档，还包括浏览器信息、浏览历史、浏览地址等等。而 document 对象仅仅专门用来操作我们 HTML 文档中的元素。一句话概括就是：一个窗口就是一个 window 对象，这个窗口里面的HTML文档就是一个 document 对象，document 对象是 window 对象的子对象。

window 对象及下面这些 location、navigator 等子对象，由于都是操作浏览器窗口的，所以我们又称之为BOM，也就是 Browser Object Module（浏览器对象模型）。

实际上，window 对象也有非常多的方法，常用的如下表所示。

方法	说明
`alert()`	提示对话框
`confirm()`	判断对话框
`prompt()`	输入对话框
`open()`	打开窗口
`close()`	关闭窗口
`setTimeout()`	开启“一次性”定时器
`clearTimeout()`	关闭“一次性”定时器
`setInterval()`	开启“重复性”定时器
`clearInterval()`	关闭“重复性”定时器

window 对象的属性和方法是非常多的，但是大多数都用不上。

1.2. 窗口操作

在 JavaScript 中，窗口常见的操作有两种：

- 打开窗口

- 关闭窗口

打开窗口和关闭窗口，在实际开发中经常用到。

1.2.1. 打开窗口

在 JavaScript 中，我们可以使用 window 对象的 open() 方法来打开一个新窗口。

语法：

window.open(url, target)

举例：打开新窗口

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
          window.open("https://www.baidu.com");
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="打开" />
  </body>
</html>

1.2.2. 关闭窗口

在 JavaScript 中，我们可以使用 window.close() 来关闭一个新窗口。

语法：

window.close()

举例：关闭当前窗口

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
          window.close();
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="关闭" />
  </body>
</html>

1.3. 对话框

在 JavaScript 中，对话框有 3 种：

- alert()

- confirm()

- prompt()

它们都是 window 对象的方法，前面我们说过对于 window 对象的属性和方法，是可以省略 window 前缀的，例如 window.alert() 可以简写为 alert()。

1.3.1. alert()

在 JavaScript 中，alert() 对话框一般仅仅用于提示文字。这个方法在之前都用到烂了，这里我们就不用多说。

对于 alert()，只需记住一点就行：在 alert() 中实现文本换行，用的是\n。

语法：

alert("提示文字")

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      alert("HTML\nCSS\nJavaScript");
    </script>
  </head>
  <body></body>
</html>

1.3.2. confirm()

在 JavaScript 中，confirm() 对话框不仅提示文字，还提供确认。

语法：

confirm("提示文字")

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
          if (confirm("确定要跳转到百度吗？")) {
            window.location.href = "https://www.baidu.com";
          } else {
            document.write("你取消了跳转");
          }
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="回到首页" />
  </body>
</html>

1.3.3. prompt()

在 JavaScript 中，prompt() 对话框不仅提示文字，还返回一个字符串。

语法：

prompt("提示文字")

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
          var name = prompt("请输入你的名字");
          document.write("欢迎来到<strong>" + name + "</strong>");
        };
      };
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="按钮" />
  </body>
</html>

对于 alert()、confirm() 和 prompt() 对话框，我们总结一下（如下表所示）：

方法	说明
`alert()`	仅提示文字，没有返回值
`confirm()`	具有提示文字，返回布尔值（true 或 false）
`prompt()`	具有提示文字，返回“字符串”

1.4. location 对象

在 JavaScript 中，我们可以使用 window 对象下的 location 子对象来操作当前窗口的 URL。

对于 location 对象，我们只需要掌握以下 3 个属性（其他不用管），如表所示：

属性	说明
`href`	当前页面地址
`search`	当前页面地址“？”后面的内容
`hash`	当前页面地址“#”后面的内容

1.4.1. window.location.href

在 JavaScript 中，我们可以使用 location 对象的 href 属性来获取或设置当前页面的地址。

语法：

window.location.href

举例：获取当前页面地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var url = window.location.href;
      document.write("当前页面地址是：" + url);
    </script>
  </head>
  <body></body>
</html>

举例：设置当前页面地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      setTimeout(function () {
        window.location.href = "https://www.baidu.com";
      }, 2000);
    </script>
  </head>
  <body>
    <p>2秒后跳转</p>
  </body>
</html>