摘要:是干嘛的對(duì)象的對(duì)象是專門用來將或者讀取成一個(gè)的。這個(gè)可以用在的任何可以使用的地方,比如的的和標(biāo)簽等。對(duì)象靜態(tài)方法對(duì)象的靜態(tài)方法用于銷毀之前通過方法創(chuàng)建的。在之后,再次使用該,會(huì)報(bào)錯(cuò),因?yàn)樵撘呀?jīng)被銷毀,無法使用了。
1 window.URL是干嘛的?
window對(duì)象的URL對(duì)象是專門用來將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ì)顯示出來。
那么這些file或者blob來自于哪里呢?可以是在本地硬盤中通過選擇的文件,也可以是通過ajax請(qǐng)求后某個(gè)不知名的服務(wù)器請(qǐng)求到內(nèi)存的。
問題: 如果一個(gè)img標(biāo)簽的src屬性是一個(gè)excel文件轉(zhuǎn)換成的url對(duì)象,那會(huì)發(fā)生什么?
我想img肯定將它讀不出來,因?yàn)闀?huì)img標(biāo)簽會(huì)檢測文件類型。
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)前頁面的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)被銷毀,無法使用了。
window.URL.revokeObjectURL(objectURL); objectURL A DOMString representing a object URL that was previously created by calling createObjectURL(). return ubdefined
https://developer.mozilla.org...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/101874.html
摘要:問題以上兩種方式,當(dāng)在下載格式,或者視頻文件時(shí),瀏覽器會(huì)直接播放該文件,而達(dá)不到直接下載的功能,此時(shí),當(dāng)下載音視頻文件時(shí)無法使用以上兩種方式。 1、通過window.open()打開新頁面下載文件 window.open(`url`, _self) 使用場景:下載excel文件,后端提供接口,接口返回的是文件流,可以直接使用window.open(),最簡單的方式。 優(yōu)點(diǎn):最簡潔; 弊...
摘要:不過這種方式有問題,目前查到的大部分過程都是會(huì)在服務(wù)器新建出一個(gè)文件,等下載完畢在做刪除,還沒有找到可以跨過這一步的方式。 showImg(https://segmentfault.com/img/remote/1460000018850368); Content-Disposition / Content-Type Content-Disposition http 頭部的 Conte...
摘要:與介紹只是對(duì)象的一個(gè)屬性,可以判斷圖片加載完成,不管圖片是不是有緩存而則是這個(gè)對(duì)象的事件回調(diào),當(dāng)圖片加載完成后執(zhí)行綁定的函數(shù)。第三次點(diǎn)擊,谷歌瀏覽器結(jié)果為瀏覽器結(jié)果為。例打印結(jié)果第一次點(diǎn)擊,谷歌瀏覽器結(jié)果為瀏覽器結(jié)果為空。 onload與complete介紹 complete只是HTMLImageElement對(duì)象的一個(gè)屬性,可以判斷圖片加載完成,不管圖片是不是有緩存;而onload則...
摘要:然而事實(shí)上下載的的確確發(fā)生了,只是要等到下載完文件之后才能構(gòu)建對(duì)象,再轉(zhuǎn)化成文件。權(quán)限校驗(yàn)有些時(shí)候,我們需要對(duì)下載做一些限制,最常見的就是權(quán)限校驗(yàn)了,如檢查該用戶是否有下載的權(quán)限,是否有高速下載的權(quán)限等等。 簡介 我們知道,下載文件是一個(gè)非常常見的需求,但由于瀏覽器的安全策略的限制,我們通常只能通過一個(gè)額外的頁面,訪問某個(gè)文件的 url 來實(shí)現(xiàn)下載功能,但是這種用戶體驗(yàn)非常不好。幸好,...
閱讀 3487·2023-04-25 22:45
閱讀 1291·2021-11-11 16:54
閱讀 2798·2019-08-30 15:44
閱讀 3196·2019-08-30 15:44
閱讀 1654·2019-08-30 13:55
閱讀 948·2019-08-29 18:45
閱讀 1203·2019-08-29 17:25
閱讀 1016·2019-08-29 12:59