window.location和document.location的区别分析

下面我将详细讲解一下“window.location和document.location的区别分析”的攻略。

标题

简介

window.location和document.location是JavaScript中的两个对象，它们都表示当前页面的URL地址。虽然它们的属性和方法非常相似，但它们之间是有一些区别的。

window.location和document.location的区别

window.location和document.location在很多方面是相同的，例如它们都具有属性和方法：

公共属性

• hash：返回URL中的#号后面的部分
• host：返回主机名和端口号，如果没有端口号则返回空字符串
• hostname：返回主机名（不包含端口号）
• href：返回完整的URL地址
• pathname：返回当前页面的路径部分
• port：返回端口号，如果没有则返回空字符串
• protocol：返回使用的协议（http或https）
• search：返回URL中的查询字符串部分（含?）

公共方法

• assign(url)：加载新的URL地址，可以是本地地址或者网络地址
• reload()：重新加载当前页面
• replace(url)：以新的URL地址替换当前页面

虽然两者很相似，但是它们之间确实有一些细微的差别。具体如下：

• window.location是一个对象，它包含了当前URL的全部信息，例如window.location.href获取当前页面的完整URL路径，而document.location是一个location对象的只读副本，它包含了与window.location相同的信息，但是不能对它进行写入或修改。
• window.location的属性或方法可以被window和document对象访问，而document.location的属性或方法只能被document对象访问。
• 在某些老式的浏览器中，window.location.replace方法可能会导致历史记录堆栈中记录的URL位置信息丢失，而使用document.location.replace方法则可以避免这个问题。

示例说明

示例一

//输出当前页面的URL地址
alert(window.location.href);
alert(document.location.href);

在上面的示例中，我们使用window.location.href和document.location.href获取了当前页面的URL地址，这两种方式实现的效果是一样的。

示例二

//在新窗口中打开新页面
window.open("http://www.baidu.com","_blank");

在上面的示例中，我们使用window.open()方法在新的窗口中打开了百度的首页，这个方法也可以使用document.open()来实现相同的效果，但是它不会打开新窗口。

结束语

以上就是window.location和document.location的区别分析和示例说明，希望对您有所帮助！