迹忆客 专注技术分享

本文将介绍如何在 JavaScript 中获取 href/location。JavaScript 组件提供两种选择；第一个使用 location 属性，第二个使用 open 方法。

在 JavaScript 中获取 href 或位置

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

它们之间最大的区别是它们的浏览器兼容性。window.location 被所有支持的浏览器读取/写入。

document.location 在 IE 中是只读的，但在基于 Gecko 的浏览器（如 Firefox）中是读/写的。

为了与浏览器通信，JavaScript 提供了主窗口对象。表示浏览器窗口。

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

在 JavaScript 中使用 getAttribute() 获取 Href

Element 接口的 getAttribute() 方法返回元素的指定属性的值。如果指定的属性不存在，则返回值为 null 或" "（空字符串）。

语法：

const attributeOutput = element.getAttribute(attributeName);

attributeName 是你要检索其值的属性名称。它返回包含 attributeName 值的字符串。

关于 getAttribute 函数的更多信息可以在 getAttribute 的文档中找到。

<a id="google" href="https://www.google.com"></a>
<a id="local" href="aboutUs"></a>

const value1 = document.getElementById('google').getAttribute('href');
const value2 = document.getElementById('local').getAttribute('href');
console.log(value1);
console.log(value2);

在上面的代码中，我们使用元素的 getAttribute 方法来获取与请求元素关联的 select 属性的值。在任何浏览器中运行上述代码后，它会打印出类似这样的内容。

输出：

"https://www.google.com"
"aboutUs"

在 JavaScript 中使用 href 属性获取 Href

HTMLAnchorElement.href 属性是一个字符串化器，它返回一个包含完整 URL 的 USVString 并允许更新 href。

getAttribute() 和 href 属性之间的唯一区别是先验返回 anchor 元素的值。相反，后者返回 anchor 元素指向的完整路径。

语法：

// Getting href
string = anchorElement.href;
// Setting href
anchorElement.href = string;

例子：

<a id="google" href="https://www.google.com"></a>
<a id="local" href="aboutUs"></a>

const value1 = document.getElementById('google').href;
const value2 = document.getElementById('local').href;
console.log(value1);
console.log(value2);

在上面的代码中，我们使用了 anchor 元素的 href 属性，它将给出 anchor 元素指向的完整路径。在任何浏览器中运行上述代码后，它会打印出类似这样的内容。

输出：

"https://www.google.com/"
"https://fiddle.jshell.net/_display/aboutUs"