在 JavaScript 中使用 Onclick 转到 URL

Shraddha Paghdar 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 window.open() 转到 URL
  2. 在 JavaScript 中使用 window.location 转到 URL
在 JavaScript 中使用 Onclick 转到 URL

window 对象是用于与浏览器对话的最重要的对象之一。它代表浏览器的窗口。所有的全局变量、函数都成为 window 对象的成员。窗口的位置对象用于获取当前页面的 URL 以及更改重定向的 URL。

在今天的文章中,我们将学习如何在 JavaScript 中使用 onclick 访问 URL。

JavaScript window 对象提供了两种方式,第一种是使用 location 属性,第二种是使用 open() 方法。

在 JavaScript 中使用 window.open() 转到 URL

它是 JavaScript 提供的一种 Window 接口方法,它将指定的 URL/资源加载到具有指定名称的新标签页或现有浏览器中。此方法将生成一个用于打开指定 URL 的新窗口。每次 window.open() 方法返回它都包含 about:blank。当前脚本块完成执行后,将加载实际 URL。

JavaScript 中 window.open() 的语法

window.open(url, windowName, windowFeatures);

参数

  • url:这是一个强制参数,它接受有效的 URL、图像路径或浏览器支持的其他资源。如果传递空字符串,它将打开一个带有空白 URL 的新标签页。
  • windowName:它是一个可选参数,它指定浏览上下文的名称。这不定义窗口的标题。此外,此窗口名称不应包含任何空格。
  • windowFeatures:这是一个可选参数。此参数接受新标签页的逗号分隔窗口属性,形式为 name=value,如果属性是布尔值,则仅接受 name。一些特性是窗口对象的默认位置和大小。

示例代码:

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>
window.open("https://www.google.com");

在 JavaScript 中使用 window.location 转到 URL

它是 window.location 的只读属性,返回 Location 对象。此对象包含有关文档当前位置的信息。位置对象还包含其他属性,如 hrefprotocolhosthostnameport 等。

window.location 的属性也可以使用 location 直接访问,因为 window 对象始终保留在作用域链的顶部。用户可以使用 href 属性或 assign Location 对象的方法来加载/打开其他 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>
window.location = "https://www.google.com";
window.location.href = "https://www.google.com";
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