JavaScript location、history的简单使用|越行勤‘s Blog

location对象

window对象给我们提供了一个location属性用于获取或者设置窗口URL,并且可以用于解析URL。

URL:统一资源定位符 (Uniform Resource Locator ),时互联网上的标准资源地址。互联网上每一个文件都有唯一的URL,ta包含的信息指出目标文件的位置和浏览器该如何测处理它。

URL的一般语法格式是protocol :// hostname[:port] / path / [;parameters][?query]#fragment，简单的组成部分是：协议、主机、端口、路径，例如 https://yingwiki.top/

proticol 协议通常使用 http ftp maito(资源为电子邮件地址) 等
hostname : 域名，如yingwiki.top
port : 可以省略，服务的端口号，如常见的http服务就默认是在80端口，如果http服务搭建不是80，那么就需要写上额外的端口号。
path :定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
parameters ：这是用于指定特殊参数的可选项。
query ：可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
fragment，字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。'#' 后面的内容常见于链接锚点。

location 对象就是来**获取或者设置窗口URL**的接口，仔细观察每次百度搜索的链接，都是通过query传参数的。

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_43_hao_pg&wd=%E8%B6%8A%E8%A1%8C%E5%8B%A4

location 常用属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

实现跳转页面

其实这个我们只需要修改 location.href 即可。

    <button>点我跳转页面</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            location.href='https://yingwiki.top';
        })
    </script>

5秒后跳转到其他页面

这一定用了前面学习的计时器就好了。

    <span></span>
    <script>
        var span=document.querySelector('span');
        var t=5;
        setInterval(function(){
            span.innerHTML='距离跳转页面还有'+t+'秒';
            t--;
            if(t==0){
                location.href= 'https://yingwiki.top';
            }
        },1000)
    </script>

URL的参数

我们可以通过location对象实现在不同页面传递参数。URL 那一段是可以传递参数的呢-----[?query]

提交表单可少不了，form表单了，忘记了可以快速查询一下。

    <form action="接受参数.html">
        <input type="text" name="uname" id="">
        <input type="submit" value="传递参数">
    </form>

传递参数的URL是这样子的 index.html?uname=越行勤，如果我们想要获取键值和参数，其实我们就在获取?后面的query。其实可以通过 location.search 获取 ?uname=越行勤

这里我们需要解决下面几个问题：

先把?去掉，解决办法：通过 slice(1)截取字符串
字符串获取参数和键值如果多个参数还需要分开。解决办法：split('='),split('&') 分割字符串
中文传递乱码问题,解决办法：decodeURI()

    接受的参数为：<span></span>
    <script>
        var span =document.querySelector('span');
        var params = location.search.substr(1);
        params=decodeURI(params);
        var arr=params.split('=');
        span.innerHTML=arr[1];
    </script>

location 对象常用方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

其实这个方法字面含义就是其作用。

只不过要强调 assign()和 replace()的区别。

assign可以点击退回按钮返回上一个页面，但是 replace不可的,但是还是会有浏览记录的（至少chrome是这样的）。

    <button id='assign'>assign可以退回</button>
    <button id="replace">replace不可以退回</button>
    <script>
        var btn1=document.querySelector('#assign');
        var btn2 =document.querySelector('#replace');
        btn1.onclick=function(){
            location.assign('https://yingwiki.top')
        }
        btn2.onclick = function () {
                location.replace('https://yingwiki.top')
        }
    </script>

reload() 相当于刷新网站，但是这是加载上次加载的缓存，如果从新从服务器获取，那么可以reload(true)