小編給大家分享一下window.URL對(duì)象的使用方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

醴陵網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

1 window.URL是干嘛的？

window對(duì)象的URL對(duì)象是專門用來(lái)將blob或者file讀取成一個(gè)url的。

window.URL.createObjectURL(file / blob)

這個(gè)url可以用在html的任何可以使用url的地方，比如img的src ; audio/video的src和source標(biāo)簽等。
所有能在瀏覽器中顯示的圖片、音頻、視頻等都是可以用url轉(zhuǎn)換成一個(gè)url對(duì)象的，這個(gè)對(duì)象一旦被src引用，就會(huì)顯示出來(lái)。

那么這些file或者blob來(lái)自于哪里呢？可以是在本地硬盤中通過選擇的文件，也可以是通過ajax請(qǐng)求后某個(gè)不知名的服務(wù)器請(qǐng)求到內(nèi)存的。

問題： 如果一個(gè)img標(biāo)簽的src屬性是一個(gè)excel文件轉(zhuǎn)換成的url對(duì)象，那會(huì)發(fā)生什么？

我想img肯定將它讀不出來(lái)，因?yàn)闀?huì)img標(biāo)簽會(huì)檢測(cè)文件類型。

2.URL構(gòu)造函數(shù)將普通url轉(zhuǎn)換成URL對(duì)象

除了可以將一個(gè)文件或者blob轉(zhuǎn)化成一個(gè)Url對(duì)象，還可以將一個(gè)url字符串轉(zhuǎn)換成一個(gè)URL對(duì)象

// 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屬性返回一個(gè)URLSearchParams對(duì)象，這樣就可以對(duì)url對(duì)象中的參數(shù)進(jìn)行遍歷或者其他操作

var urlSearchParams = URL.searchParams;

3.URL實(shí)例對(duì)象的toString()方法

URL的toString()方法可以將URL轉(zhuǎn)換成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對(duì)象靜態(tài)方法createObjectURL(object)

URL.createObjectURL(object)是URL 對(duì)象的靜態(tài)方法，用于創(chuàng)建一個(gè)DOMString（is a UTF-16 string），其實(shí)就是返回了一個(gè)在內(nèi)存中指向傳入?yún)?shù)object的引用路徑url字符串。
生成的這個(gè)url字符串會(huì)在當(dāng)前頁(yè)面的document被銷毀的時(shí)候失效。

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對(duì)象靜態(tài)方法revokeObjectURL(objectURL)

URL對(duì)象的靜態(tài)方法revokeObjectURL()用于銷毀之前通過URL.createObjectURL(object)方法創(chuàng)建的url。
一旦調(diào)用這個(gè)方法就表示告訴瀏覽器不再保存之前被創(chuàng)建的那個(gè)url了。 在revokeObjectURL(objectURL)之后，再次使用該url，會(huì)報(bào)錯(cuò)，因?yàn)樵搖rl已經(jīng)被銷毀，無(wú)法使用了。

window.URL.revokeObjectURL(objectURL);

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

return 
ubdefined

看完了這篇文章，相信你對(duì)window.URL對(duì)象的使用方法是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！