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=越行勤

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

  1. 先把?去掉,解决办法:通过 slice(1)截取字符串
  2. 字符串获取参数和键值 如果多个参数还需要分开。解决办法:split('='),split('&') 分割字符串
  3. 中文传递乱码问题,解决办法 :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)

history 对象

常用方法

方法作用
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面

这个go(),使用起来 go(1),就是前进两页,go(-2)就是返回两页

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/02/02/javascript-location-history
最后更新于:  136  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟