Introduction à l'utilisation de l'objet window.URL (avec exemples)

Cet article vous apporte une introduction à l'utilisation de l'objet window.URL (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1 À quoi sert window.URL ?

L'objet URL de l'objet window est spécialement utilisé pour lire un blob ou un fichier dans une URL.

window.URL.createObjectURL(file / blob)

Cette URL peut être utilisée n'importe où en HTML où une URL peut être utilisée, comme le src d'img ; le src et les balises source de l'audio/vidéo, etc.
Toutes les images, audios, vidéos, etc. pouvant être affichées dans le navigateur peuvent être converties en objet url à l'aide de url. Une fois cet objet référencé par src, il sera affiché.

Alors, d'où viennent ces fichiers ou blobs ? Il peut s'agir d'un fichier sélectionné via sur le disque dur local, ou il peut être demandé à un serveur inconnu via une requête ajax et en mémoire.

Question : Que se passe-t-il si l'attribut src d'une balise img est un objet url converti à partir d'un fichier Excel ?

Je pense que img ne pourra certainement pas le lire, car la balise img détectera le type de fichier.

2. Le constructeur d'URL convertit une URL ordinaire en objet URL

En plus de convertir un fichier ou un blob en objet Url, il peut également convertir une chaîne d'URL en objet URL

// 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

L'attribut searchParams renvoie un objet URLSearchParams, de sorte que les paramètres de l'objet url puissent être parcourus ou utilisés d'une autre manière

var urlSearchParams = URL.searchParams;

3 La méthode toString() de l'instance d'URL. object

La méthode toString() d'URL peut convertir l'URL en chaîne d'URL, et :

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.Méthode statique de l'objet URL createObjectURL(object)

URL.createObjectURL(object) est une méthode statique d'objet URL Elle est utilisée pour créer une DOMString (est une chaîne UTF-16). . En fait, il renvoie une chaîne d'URL du chemin de référence en mémoire pointant vers l'objet paramètre passé.
La chaîne URL générée deviendra invalide lorsque le document de la page actuelle sera détruit.

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. Méthode statique de l'objet URL revokeObjectURL(objectURL)

Méthode statique de l'objet URL revokeObjectURL( ) est utilisé pour détruire l'url précédemment créée via la méthode URL.createObjectURL(object).
Une fois cette méthode appelée, elle indique au navigateur de ne pas enregistrer l'URL précédemment créée. Après revokeObjectURL(objectURL), si vous utilisez à nouveau l'URL, une erreur sera signalée car l'URL a été détruite et ne peut pas être utilisée.

window.URL.revokeObjectURL(objectURL);

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

return 
ubdefined

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!