JavaScript获取当前域名 Url 路由路径路由参数

最新推荐文章于 2024-05-26 14:45:36 发布

wayne丶

最新推荐文章于 2024-05-26 14:45:36 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_39408204/article/details/98055052

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍如何使用JavaScript获取当前页面的域名、URL、相对路径及URL参数，并将其封装为对象，便于前端开发中对页面信息的管理和使用。

一、获取当前域名

var domain = document.domain;

var domain = window.location.host;

获取到的当前域名不包括 http://，如本地 127.0.0.1
所以把获取到的域名使用时候要加上 http://否则单击链接时导航会出错。

二、获取当前Url

　var url = window.location.href;

　var url = self.location.href;

　var url = document.URL;

　var url = document.location;//这里返回的是个对象 里面包含url所有值 也可以指定为href

获取到的url 包含域名路径以及参数

三、获取当前相对路径

大致思路就是先截取// 再截取/ 如果有参数就先截取？

举例： http://www.baidu.com/1.html

{
    let href = 'http://www.baidu.com/wayne.com'
    let path = href.split('//')[1].split('/')[1] 
    console.log(path)   //wayne.com
}

有参数情况下

{
    let href = 'http://www.baidu.com/wayne.com?anme=xiaohaowen'
    let query = href.split('?')[1]//参数
    let path = href.split('?')[0].split('//')[1].split('/')[1]    
    console.log(path)   //wayne.com
}

二级三级路由情况下

{
    let href = 'http://www.baidu.com/user/blog/wayne.com?anme=xiaohaowen'
    let query = href.split('?')[1]//参数
    let pathArr = href.split('?')[0].split('//')[1].split('/')
        pathArr.splice(0,1)
    let path = pathArr.join('/')
    console.log(path)   //wayne.com
}

四、获取当前参数并吧参数封装为对象方便使用

{
   function getParaName (url){
    if(!url ||url.indexOf('?') == -1 ){
        return 
    }
    let paraname=  url.split('?')[1]
    return setObject(paraname)//封装成对象
  }


  function setObject (paraArr){
    let obj = {}
    let arr1  = paraArr.split('&') 
    arr1.forEach(item=>{
      let str = item.split('=')
      let key = str[0]
      let val = str[1]
      obj[key]=val
    })
    return obj
  }

  let url = 'www.baidu.com?b=1&c=2&d=3'
  console.log(getParaName(url)) //{b: "1", c: "2", d: "3"}
}