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來自於哪里呢?可以是在本地硬盤中通過<input type='file'>選擇的文件,也可以是通過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
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.
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
原文鏈接:https://blog.csdn.net/weixin_33767813/article/details/88586509