Why is window.location.search empty?

Posted on

这是一个有趣的问题，其实开发中没有遇到过，是一次面试时被问到的，URL中存在?id=xxx这样的search部分，BUT调用window.location.search是空？？？

测试只要search前面有#，window.location.search就会是空

正确取值的情况：

不能正确取值的情况：

为什么search前面有#就不能取值呢？官方介绍里没有提及，搜索的结果如下：

结果：

原因是#后面都被识别为hash了，甚至不识别?部分的search，所以#后面的search取不到值，要解决的话一是避免这样的URL，二是取值的时候自己处理从hash中解析出来，封装好的代码如下：

1
2
3
4
5
6
7
8
9
10
11
function GetQueryString(name)
{
     var search = window.location.search;
     if(!search){
        var hash = location.hash;
        search = hash?hash.substring(hash.indexOf('?')):'';
     }
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

另外如果你是直接在框架里操作，比如vue，就不用担心取不到值，利用它的this.$route.query是可以正常取值的

下面是vue框架的截图