Einführung in die Verwendung des window.URL-Objekts (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung des window.URL-Objekts (mit Beispielen). Freunde in Not können darauf verweisen.

1 Wozu dient window.URL?

Das URL-Objekt des Fensterobjekts wird speziell zum Einlesen eines Blobs oder einer Datei in eine URL verwendet.

window.URL.createObjectURL(file / blob)

Diese URL kann überall in HTML verwendet werden, wo eine URL verwendet werden kann, z. B. in den src- und Quell-Tags von img für Audio/Video usw.
Alle Bilder, Audios, Videos usw., die im Browser angezeigt werden können, können mithilfe von URL in ein URL-Objekt umgewandelt werden. Sobald dieses Objekt von src referenziert wird, wird es angezeigt.

Woher kommen diese Dateien oder Blobs? Es kann sich um eine über ausgewählte Datei auf der lokalen Festplatte handeln oder sie kann von einem unbekannten Server über eine Ajax-Anfrage in den Speicher angefordert werden.

Frage: Was passiert, wenn das src-Attribut eines img-Tags ein aus einer Excel-Datei konvertiertes URL-Objekt ist?

Ich denke, img wird es definitiv nicht lesen können, da das img-Tag den Dateityp erkennt.

2. Der URL-Konstruktor konvertiert eine gewöhnliche URL in ein URL-Objekt

Zusätzlich zur Konvertierung einer Datei oder eines Blobs in ein URL-Objekt kann er auch eine URL-Zeichenfolge in ein URL-Objekt konvertieren

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

Das searchParams-Attribut gibt ein URLSearchParams-Objekt zurück, sodass die Parameter im URL-Objekt durchlaufen oder anderweitig bedient werden können

var urlSearchParams = URL.searchParams;

3. Die toString()-Methode des URL-Instanzobjekts

Die toString()-Methode von URL kann die URL in einen URL-String umwandeln und:

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 statische Methode createObjectURL( object)

URL.createObjectURL(object) ist eine statische Methode des URL-Objekts. Sie wird zum Erstellen eines DOMStrings verwendet (ist tatsächlich eine UTF-16-Zeichenfolge). im Speicher, der auf das übergebene Parameterobjekt zeigt.
Die generierte URL-Zeichenfolge wird ungültig, wenn das Dokument der aktuellen Seite zerstört wird.

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. Statische URL-Objekt-Methode revokeObjectURL(objectURL)

Statische URL-Objekt-Methode revokeObjectURL() wird verwendet Die URL, die mit der Methode URL.createObjectURL(object) erstellt wurde, bevor sie zerstört wird.
Sobald diese Methode aufgerufen wird, weist sie den Browser an, die zuvor erstellte URL nicht zu speichern. Wenn Sie die URL nach revokeObjectURL(objectURL) erneut verwenden, wird ein Fehler gemeldet, da die URL zerstört wurde und nicht verwendet werden kann.

window.URL.revokeObjectURL(objectURL);

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

return 
ubdefined

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des window.URL-Objekts (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!