在 JavaScript 中更改页面
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。
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