URL related knowledge points

BOM_location

At present url For example

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

effect

obtain At present url Related information ！

attribute

The following attributes are in addition to origin attribute ( read-only ) All are Can read but write attribute ！

//  Get the complete url https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button
location.href

//  Get current url Domain name of ( Standard form ) https://element.eleme.cn
location.origin

//  Get current url The agreement name of  https:
location.protocol(*/*ˈprəʊtəkɒl*/*)

//  Get current url Domain name of  // element.eleme.cn
location.hostname

//  Get current url Port number  '' 
location.port

//  Get current url Parameters carried ,  With “？” start  ?id=111&name=222 
location.search

//  Get current url Of hash value  , With “#” start  #/zh-CN/component/button
location.hash

Method

//  Reload 
location.reload()

//  Replace the current path - Open a new page 
location.replace( new url)

//  Get current full url
location.toString() //  pre location.href Function the same ( But it's read-only , Do not modify url)

URL Constructors

effect

​ Create and return Appoint url object

attribute

[1] contain location Object properties ;

const url = new URL('https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button')
     console.log(url) // URL object 
     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 attribute

• Read-only property
• The return value is URLSearchParams object
  • Properties are not displayed directly
  • You can't get

searchparams object

• Cannot get its properties directly

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

• You can get

  • (1)get Method ： The first value of the search parameter

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

  • (2)getAll Method ： Gets all values of the specified search parameter , The return is an array

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

  • (3)has Method ： Determine whether this search parameter exists

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

Method

URL.createObjectURL

• grammar

  • URL.createObjectURL(object)
    

  • object The parameter can be a File object or Blob object ; Not a remote link ！

example

[1] obtain url Portability parameter

• (1) adopt location Object get parameters

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

• (2) By creating a URl Object get parameters

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