美文网首页
Location对象分析

Location对象分析

作者: 一座被占用 | 来源:发表于2019-05-30 18:03 被阅读0次

    今天分析下Location对象,以及一些相关的信息

    URL:统一资源定位符(Uniform Resource Locator)由下面几个部分构成:

        scheme://host:port/path?query#fragment

     scheme:通信协议,常用的有 http,ftp,maito 等

    像上面截图看到的:

    1.location.href

    获取地址栏所有内容

    例如:https://ant.design/components/modal-cn/#header

    2.location.protocol

    URL协议部分

    例如:https:

    3.location.host

    URL的主机部分,包括端口号。返回服务器名称 + 端口号

    例如:ant.design

    4.location.port

    URL中的端口号,如果采用默认的80端口,那么返回的是空字符串

    例如:""

    5.location.pathname

    URL的路径部分(就是文件地址)

    例如:/components/modal-cn/

    6.location.search

    查询(参数)部分,从?开始

    例如:?preview_height=50&open_file=src/app.js

    7.location.hash

    获取锚点

    例如:#header

    8.location.hostname

    URL的主机部分,不包括端口号(注意它与host的区别).不带端口号的服务器名称

    例如:ant.design

    9.location.origin

    返回URL协议 + 服务器名称 + 端口号 (location.origin = location.protocol + '//' + location.host)

    例如:https://ant.design

    方法:

    10.location.assign()

    跳转链接,立即打开新的 URL 并在浏览器的历史记录中生成一条记录,回退可返回

    11.location.replace()

    跳转链接,立即打开新的URL,不会在历史记录中生成一个记录,回退不可返回

    12.location.reload()

    重新加载当前显示的页面:

    参数:无 --- 就会使用最有效的方式重新加载页面,可能从浏览器缓存中重新加载

    参数:true --- 那么就会强制从服务器重新加载

    补充:

    “相对路径”和“绝对路径”的比较

    ".":相对路径,代表目前所在的目录

    "..":相对路径,代表上一层目录

    "/":代表根目录

    在项目发布中,表示根目录,注意根目录是location.host开始找的,如果找不到文件,可能没有从pathname目录里面找

    相关文章

      网友评论

          本文标题:Location对象分析

          本文链接:https://www.haomeiwen.com/subject/uvdvtctx.html