迹忆客 专注技术分享

Location 接口表示它所链接的对象的位置 (URL)。Document 和 Windows 界面有一个可以通过 document.location 或 window.location 访问的链接位置。

每个之间最大的区别是它们与浏览器的兼容性。window.location 在所有兼容的浏览器上都是读/写的。

document.location 在 IE 中是只读的；但是，在 Firefox 等基于 Gecko 的浏览器中，它是读/写的。

JavaScript 提供了代表浏览器窗口与浏览器通信的最重要的窗口对象。

所有全局变量函数都成为窗口对象的成员。窗口位置对象用于获取当前页面的 URL，也用于更改重定向 URL。

在今天的文章中，我们将学习如何在 JavaScript 中更改页面。JavaScript 窗口对象提供了 2 种方式；第一个使用 location 属性，第二个使用 open 方法。

在 JavaScript 中使用 window.open() 更改页面

window.open() 是 JavaScript 提供的窗口接口方法，它将指定的 URL/资源加载到具有指定名称的新标签页或现有浏览器中。此方法将生成一个新窗口以打开指定的 URL。

每次 window.open() 方法返回时，窗口都会包含 about:blank。当前脚本块执行完毕后，将加载实际的 URL。

语法：

window.open(url, windowName, windowFeatures);

url 是一个必需参数，它接受有效的 URL、图像路径或浏览器支持的其他资源。如果空字符串通过，则会打开一个带有空 URL 的新标签页。

windowName 是一个可选参数，用于指定浏览上下文的名称。它不设置窗口标题。

此外，此窗口的名称不得包含空格。

windowFeatures 是一个可选参数。如果属性是布尔值，此参数接受形式为 name=value 或 name 的新标签页的逗号分隔窗口属性。

一些选项是窗口对象的默认位置和大小。

关于 Window.location 函数的更多信息可以在这个文档中找到。

例子：

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

function openGoogleByMethod() {
  window.open('https://www.google.com');
}

我们在代码中使用了 window 对象的 open 方法，它将在新标签页中打开请求的 URL。

在 JavaScript 中使用 window.location 更改页面

它是 Window.location 的只读属性，返回 Location 对象。此对象包含有关文档当前位置的信息。

这个 Location 对象还包含其他属性，例如 href、protocol、host、hostname、port 等。

你还可以使用 location 直接访问 window.location 属性，因为窗口对象始终位于作用域链的顶部。

用户可以使用 href 属性或 Location 对象的 assign 方法来加载/打开另一个 URL/资源。

语法：

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

URL_PATH 是一个必需参数，它接受必须打开的有效 URL。此 URL 可以是绝对 URL、相对 URL、锚 URL 或新协议。

例子：

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>

function openGoogle() {
  window.location = 'https://www.google.com';
  window.location.href = 'https://www.google.com';
}

在代码中，我们使用了 window 对象的 location 属性，它将使用同一标签页中的现有 URL 更改请求的 URL。