在 JavaScript 中更改页面

Shraddha Paghdar 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 window.open() 更改页面
  2. 在 JavaScript 中使用 window.location 更改页面
在 JavaScript 中更改页面

Location 接口表示它所链接的对象的位置 (URL)。DocumentWindows 界面有一个可以通过 document.locationwindow.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=valuename 的新标签页的逗号分隔窗口属性。

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

关于 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 对象还包含其他属性,例如 hrefprotocolhosthostnameport 等。

你还可以使用 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。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn