Javascript .pathname IE异常？

在前端开发中，经常会使用到Javascript来操纵URL。其中，.pathname是一个非常常用的URL属性。然而，在IE浏览器中，.pathname却存在一些异常问题。本篇文章将详细介绍这些问题，并提供解决方案。

问题描述

在大多数现代浏览器中，当我们想要获取当前页面的路径时，可以通过以下方式访问URL对象的.pathname属性：

const path = window.location.pathname;

然而，在IE浏览器中，.pathname属性会返回错误的结果。例如，对于URL http://www.example.com/pathname/subpath/，在IE中获取.pathname属性的值为/pathname/subpath/，而不是期望的/pathname/subpath。这个错误的结果表明，IE浏览器在.pathname后面添加了一个额外的斜杠。

问题分析

这个问题的根源在于不同浏览器之间对URL标准的理解和实现方式不同。根据MDN文档, .pathname属性应该返回URL的路径部分，即从主机名或端口号开始到查询字符串或哈希值之前的部分，不包括斜线。

然而，在IE浏览器中，.pathname属性返回的路径部分包含一个初始斜线和一个结束斜线。根据MSDN文档，这个行为是IE浏览器的一个quirk，即IE将URL解析为文件路径，并在.pathname属性前面添加初始斜线。

解决方案

为了解决IE浏览器中.pathname属性的异常问题，我们需要手动去除多余斜杠。可以通过以下代码实现：

const path = window.location.pathname.replace(/(^\/)|(\/$)/g, '');

该代码会将.pathname属性返回的路径字符串两端的斜杠去除，从而得到正确的结果。

总结

在使用Javascript操作URL时，要特别注意不同浏览器之间对URL标准的理解和实现方式的差异。针对IE浏览器中.pathname属性的异常问题，可以通过手动去除多余斜杠的方式来解决。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29176