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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方法

// 重新加载
location.reload()

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

// 获取当前完整url
location.toString() // 预location.href功能相同(但是是只读的，不能修改url)
1
2
3
4
5
6
7
8

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
1
2
3
4
5
6
7
8
9

[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
    2

• 可通过方法获取

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

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

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

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

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

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

方法

URL.createObjectURL

• 语法

  • URL.createObjectURL(object)
    1

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

    • URL.createObjectURL('http://test2.clipworks.com:8666/api/thirdSite/downloadTemplate') // 报错 Failed to execute 'createObjectURL' on 'URL'
      1

• 返回值

  • 返回表示指定的 File 对象或 Blob 对象的本地url；
  • 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过；
    • 浏览器在 document 卸载的时候，会自动释放它们；
    • 也可主动通过 revokeObjectURL 方法去主动释放内存；

URL.revokeObjectURL

• 作用：释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象

• 语法

  • URL.revokeObjectURL(object)
    1

  • object:通过调用 URL.createObjectURL() 创建的 URL 对象

实例

[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
    1
    2
    3
    4

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

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

[2]创建本地url

const xhr = new XMLHttpRequest()
	xhr.open('POST','https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163')
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function(){
	const url = URL.createObjectURL(xhr.response)
	console.log('结果', url) // 本地url
}
1
2
3
4
5
6
7
8

[3]为每个文件生成一个uuid

// uuid是独一无二的
const blobUrl = URL.createObjectURL(new Blob())
file[0].uuid = blobUrl.slice(blobUrl.lastIndexOf('/') + 1)
// 主动释放内存
URL.revokeObjectURL(blobUrl)
1
2
3
4
5