继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript浏览器之location

为爱心太软
关注TA
已关注
手记 170
粉丝 1.4万
获赞 860

基本概念

location对象保存了与当前窗口加载的文档有关的信息,而且可以将URL解析为独立的片段。它既是window对象的属性,也是document对象的属性,document.location与window.location引用的是同一个对象。

location对象常用的属性

location.hash:返回或设置一个URL的锚部分(#号后跟零或多个字符)
location.host:返回或设置一个URL的服务器名和端口号
location.hostname:返回或设置URL的服务器名
location.href:返回或设置完整的URL(location.toString()也返回这个值)
location.pathname:返回或设置URL的目录和文件名
location.port:返回或设置一个URL服务器使用的端口号
location.protocol:返回或设置一个URL协议(http:或https:)
location.search:返回或设置URL的查询字符串,这个字符串以问号开头

为了方便逐个访问location.search中的字符串参数,可以通过下面的函数解析字符串返回一个对象。

代码如下:

function getSearchArgs(){
    var qs=(location.search.length>0?location.search.substring(1):""),
        args={},
        item=null,
        items=qs.length?qs.split("&"):[],
        len=items.length;
    for(var i=0;i<len;i++){
        item=items[i].split("=");
        name=encodeURIComponent(item[0]);
        value=encodeURIComponent(item[1]);
        if(name.length){
            args[name]=value;
        }
    }
    return args;
}

location对象常用的方法:浏览器的重定向

1、location.assign(URL):加载一个新的文档并在浏览器的历史记录中生成一条记录。
如果将location.href或window.location设置为一个URL值,与assign()方法的效果一样。

测试代码:

setTimeout(function(){location.assign("https://www.baidu.com/")},2000)
setTimeout(function(){location.href="https://www.baidu.com/"},2000)
setTimeout(function(){window.location="https://www.baidu.com/"},2000)

2、location.reload(Boolean):用于刷新当前文档。
如果把该方法的参数设置为true,那么浏览器会绕过缓存,从服务器上重新下载该文档。

测试代码:

<h1>100</h1>
<button>Reload</button>

setInterval(
        function(){
            document.querySelector("h1").firstChild.data-=1
        },
        1000)
document.querySelector("button").onclick=function(){
    location.reload();
}

3、location.replace(newURL):用一个新文档取代当前文档。
这个方法虽然会导致浏览器的重定向,但不会在历史记录中生成记录,所以用户不能回到前一个页面。

测试代码:

setTimeout(function(){location.replace("https://www.baidu.com/")},2000)

4、修改location对象的host、hostname、pathname、port、protocol、search属性,页面也会以新URL重新加载,并在浏览器的历史记录中生成一条记录。修改hash属性会在浏览器的历史记录中生成一条记录,但不会以新URL重新加载页面。


文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP