关于JS中window.location.href,location.href,parent.location.href,top.location.href的用法与区别

在JavaScript中，有多种获取当前窗口URL地址的方法，其中最常见的有window.location.href、location.href、parent.location.href和top.location.href。

window.location.href

window.location.href是一个字符串，代表当前窗口 URL 的地址。它可以被设置为一个新的值，以实现 URL 的重定向。

语法

window.location.href

示例

// 获取当前窗口的URL地址
console.log(window.location.href); 
// 重定向当前窗口到百度首页
window.location.href = "https://www.baidu.com";

location.href

location.href可以通过window对象访问，它与window.location.href作用相同。使用此属性，可以轻松访问和修改当前网页的URL地址。

语法

location.href

示例

// 获取当前窗口的URL地址
console.log(location.href);
// 重定向当前窗口到百度首页
location.href = "https://www.baidu.com";

parent.location.href

parent.location.href属性用于获取当前窗口的父窗口的 URL 地址。如果当前窗口没有父窗口，则此属性返回当前窗口的URL地址。

语法

parent.location.href

示例

// 获取当前窗口的父窗口的URL地址
console.log(parent.location.href);

top.location.href

top.location.href属性用于获取当前窗口的顶层窗口的 URL 地址。如果当前窗口就是顶层窗口，则此属性返回当前窗口的URL地址。

语法

top.location.href

示例

// 获取当前窗口的顶层窗口的URL地址
console.log(top.location.href);

区别

• window.location.href和location.href作用相同，都可以获取和修改当前窗口的URL地址。
• parent.location.href和top.location.href都是用于获取其他窗口的URL地址，其中前者获取当前窗口的父窗口，后者获取当前窗口的顶层窗口。

另外，需要注意的是，使用location.href和window.location.href进行URL重定向时，最好使用location.href，因为这样可以避免一些奇怪的bug。

// 这种方式在Firefox下有可能会出现重定向失败的问题
window.location.href = "https://www.baidu.com"; 
// 推荐使用以下方式进行URL重定向
location.href = "https://www.baidu.com";

以上就是关于window.location.href、location.href、parent.location.href和top.location.href的用法与区别。希望可以解决你的疑惑。