window.URL オブジェクトの使い方の概要 (例付き)

この記事では、window.URL オブジェクトの使用方法を紹介します (例を示します)。必要な方は参考にしていただければ幸いです。

1 window.URL とは何ですか?

window オブジェクトの URL オブジェクトは、BLOB またはファイルを URL に読み取るために特別に使用されます。

window.URL.createObjectURL(file / blob)

この URL は、img の src、audio/video の src タグ、source タグなど、URL が使用できる HTML 内のどこでも使用できます。
ブラウザで表示できるすべての画像、音声、ビデオなどは、url を使用して URL オブジェクトに変換され、このオブジェクトが src によって参照されると表示されます。

では、これらのファイルや BLOB はどこから来たのでしょうか?ローカル ハードディスク上の を通じて選択されたファイルであることも、ajax リクエストを通じて不明なサーバーからメモリにリクエストされることもあります。

質問: img タグの src 属性が Excel ファイルから変換された URL オブジェクトの場合はどうなりますか?

img タグでファイルの種類を検出してしまうので、img では絶対に読み込めないと思います。

2. URL コンストラクターは、通常の URL を URL オブジェクトに変換します

ファイルまたは BLOB を URL オブジェクトに変換することに加えて、URL 文字列を 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

searchParams プロパティは URLSearchParams オブジェクトを返すため、URL オブジェクト内のパラメータを走査したり、その他の方法で操作したりできます。

var urlSearchParams = URL.searchParams;

3 URL インスタンス オブジェクトの toString() メソッド。

URL の toString() メソッドは、URL を URL 文字列に変換できます。

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 オブジェクトstatic メソッド createObjectURL( object)

URL.createObjectURL(object) は、DOMString (実際には UTF-16 文字列) を作成するために使用されます。渡されたパラメータ オブジェクトを指すメモリ内。

現在のページのドキュメントが破棄されると、生成された URL 文字列は無効になります。

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 オブジェクトの静的メソッド revokeObjectURL(objectURL)

URL オブジェクトの静的メソッド revokeObjectURL() は次のとおりです。 used 破棄される前に URL.createObjectURL(object) メソッドによって作成された URL。

このメソッドが呼び出されると、以前に作成した URL を保存しないようブラウザに指示されます。 revokeObjectURL(objectURL) の後、その URL を再度使用すると、URL が破壊されており使用できないため、エラーが報告されます。

rreeee

以上がwindow.URL オブジェクトの使い方の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。