Introduction to the use of window.URL object (with examples)

This article brings you an introduction to the use of the window.URL object (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1 What is window.URL for?

The URL object of the window object is specially used to read a blob or file into a URL.

window.URL.createObjectURL(file / blob)

This url can be used anywhere in html where a url can be used, such as img's src; audio/video's src and source tags, etc.
All pictures, audios, videos, etc. that can be displayed in the browser can be converted into a url object using url. Once this object is referenced by src, it will be displayed.

So where do these files or blobs come from? It can be a file selected through on the local hard disk, or it can be requested from an unknown server through an ajax request and into memory.

Question: What happens if the src attribute of an img tag is a url object converted from an excel file?

I think img will definitely not be able to read it, because the img tag will detect the file type.

2. The URL constructor converts an ordinary url into a URL object

In addition to converting a file or blob into a Url object, you can also convert a url string into a URL object

// https://cn.bing.com?id=123
var parsedUrl = new URL('https://cn.bing.com?id=123v');
console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id")); // 123
console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'alexandra')); // https://cn.bing.com/?id=123v&name=alexandra

The searchParams property returns a URLSearchParams object, so that the parameters in the url object can be traversed or otherwise operated

var urlSearchParams = URL.searchParams;

3. The toString() method of the URL instance object

The toString() method of URL can convert the URL into a url string, and:

URL.toString() === URL.href

// http://www.example.com/démonstration.html
let url = new URL('http://www.example.com/démonstration.html')
let test = url.toString() === url.href;
console.log('url.href', url.href, 'url.toString()' , url.toString() , 'test' , test);
// url.href http://www.example.com/d%C3%A9monstration.html url.toString() http://www.example.com/d%C3%A9monstration.html test true

https://developer.mozilla.org...

4.URL object static method createObjectURL( object)

URL.createObjectURL(object) is a static method of the URL object. It is used to create a DOMString (is a UTF-16 string). In fact, it returns a reference in memory pointing to the passed parameter object. Path url string.
The generated url string will become invalid when the document of the current page is destroyed.

objectURL = URL.createObjectURL(object);

object
A File, Blob or MediaSource object to create an object URL for.

return
A DOMString containing an object URL that can be used to reference the contents of the specified source object.

https://developer.mozilla.org...

5. URL object static method revokeObjectURL(objectURL)

The URL object static method revokeObjectURL() is used The URL created through the URL.createObjectURL(object) method before being destroyed.
Once this method is called, it tells the browser not to save the previously created URL. After revokeObjectURL(objectURL), if you use the URL again, an error will be reported because the URL has been destroyed and cannot be used.

window.URL.revokeObjectURL(objectURL);

objectURL
A DOMString representing a object URL that was previously created by calling createObjectURL().

return 
ubdefined

The above is the detailed content of Introduction to the use of window.URL object (with examples). For more information, please follow other related articles on the PHP Chinese website!