url相关知识点

BOM_location

以当前url为例

https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button

作用

获取当前url相关信息！

属性

以下属性除了origin属性(只读)都是可读可写属性！

// 获取完整的url https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button
location.href

// 获取当前url的域名(标准形式) https://element.eleme.cn
location.origin

// 获取当前url的协议名 https:
location.protocol(*/*ˈprəʊtəkɒl*/*)

// 获取当前url的域名 // element.eleme.cn
location.hostname

// 获取当前url的端口号 '' 
location.port

// 获取当前url携带的参数， 以“？”开头 ?id=111&name=222 
location.search

// 获取当前url的hash值 ，以“#”开头 #/zh-CN/component/button
location.hash

方法

// 重新加载
location.reload()

// 替换当前路径-打开新的页面
location.replace(新url)

// 获取当前完整url
location.toString() // 预location.href功能相同(但是是只读的，不能修改url)

URL构造函数

作用

​ 创建并返回指定url对象

属性

[1]包含location对象的属性；

const url = new URL('https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button')
     console.log(url) // URL对象
     console.log(url.href) // https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button
     console.log(url.origin) // https://element.eleme.cn
     console.log(url.protocol)// https:
     console.log(url.hostname) // element.eleme.cn
     console.log(url.port) // 
     console.log(url.search)// ?id=111&name=222
     console.log(url.hash) // #/zh-CN/component/button

[2]searchParams属性

• 只读属性
• 返回值为 URLSearchParams对象
  • 不会直接显示属性
  • 通过点语法也获取不到

searchparams对象

• 无法直接获取其属性

  • const url = new URL('https://element.eleme.cn/?id=111&id=222&name=222#/zh-CN/component/button')
    const {
            searchParams} = url // URLSearchParams {}
    

• 可通过方法获取

  • (1)get方法：搜索参数的第一个值

    • console.log('结果', searchParams.get('id')) // 111
      

  • (2)getAll方法：获取指定搜索参数的所有值，返回是一个数组

    • console.log(searchParams.getAll('id')) //['111','222']
      console.log(searchParams.getAll('b')) // []
      

  • (3)has方法：判断是否存在此搜索参数

    • console.log(searchParams.has('id')) //true
      console.log(searchParams.has('b')) // false
      

方法

URL.createObjectURL

• 语法

  • URL.createObjectURL(object)
    

  • object参数可以是一个 File对象 或 Blob对象； 不可是远程链接！

实例

[1]获取url携带参数

• (1)通过location对象获取参数

  • const {
             search } = location
    const paramsArr = search.split('?')[1].split('&')
    const id = paramsArr[0].split('=')[1] // 111
    const name = paramsArr[1].split('=')[1] // 222
    

• (2)通过创建URl对象获取参数

  • const {
             searchParams } = new URL(window.location)
    const id = searchParams.get('id') // 111
    const name = searchParams.get('name') // 222