window.URL物件的使用方法介紹（附範例）

這篇文章帶給大家的內容是關於window.URL物件的使用方法介紹（附範例） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1 window.URL是幹嘛的？

window物件的URL物件是專門用來將blob或file讀取成一個url的。

window.URL.createObjectURL(file / blob)

這個url可以用在html的任何可以使用url的地方，例如img的src ; audio/video的src和source標籤等。
所有能在瀏覽器中顯示的圖片、音訊、影片等都是可以用url轉換成url物件的，這個物件一旦被src引用，就會顯示出來。

那麼這些file或是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物件靜態方法createObjectURL( object)

URL.createObjectURL(object)是URL 物件的靜態方法，用來建立一個DOMString（is a UTF-16 string），其實就是回傳了一個在記憶體中指向傳入參數object的引用路徑url字串。
產生的這個url字串會在目前頁面的document被銷毀的時候失效。

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()用於銷毀之前透過URL.createObjectURL(object)方法建立的url。
一旦呼叫這個方法就表示告訴瀏覽器不再儲存之前被建立的那個url了。在revokeObjectURL(objectURL)之後，再次使用該url，會報錯，因為該url已經被銷毀，無法使用了。

window.URL.revokeObjectURL(objectURL);

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

return 
ubdefined

以上是window.URL物件的使用方法介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！