window.URL对象的使用方式

betacat 发布于2019-08-23 15:19 / 2913人阅读

摘要：是干嘛的对象的对象是专门用来将或者读取成一个的。这个可以用在的任何可以使用的地方，比如的的和标签等。对象静态方法对象的静态方法用于销毁之前通过方法创建的。在之后，再次使用该，会报错，因为该已经被销毁，无法使用了。

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

https://developer.mozilla.org...

云服务器 GPU云服务器 java创建对象的几种方式按照云计算服务的方式和服务对象的范围客户如何使用腾讯云的对象存储对象声明方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101874.html

关于前端实现文件下载功能

摘要：问题以上两种方式，当在下载格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。优点：最简洁；弊...

Arno 2019-08-23 17:54 评论0 收藏0
文件下载那点事

摘要：不过这种方式有问题，目前查到的大部分过程都是会在服务器新建出一个文件，等下载完毕在做删除，还没有找到可以跨过这一步的方式。 showImg(https://segmentfault.com/img/remote/1460000018850368); Content-Disposition / Content-Type Content-Disposition http 头部的 Conte...

PascalXie 2019-08-23 16:54 评论0 收藏0
JS基础篇--搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地

摘要：与介绍只是对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存而则是这个对象的事件回调，当图片加载完成后执行绑定的函数。第三次点击，谷歌浏览器结果为浏览器结果为。例打印结果第一次点击，谷歌浏览器结果为浏览器结果为空。 onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则...

callmewhy 2019-08-20 18:29 评论0 收藏0
如何用 JavaScript 下载文件

摘要：然而事实上下载的的确确发生了，只是要等到下载完文件之后才能构建对象，再转化成文件。权限校验有些时候，我们需要对下载做一些限制，最常见的就是权限校验了，如检查该用户是否有下载的权限，是否有高速下载的权限等等。简介我们知道，下载文件是一个非常常见的需求，但由于浏览器的安全策略的限制，我们通常只能通过一个额外的页面，访问某个文件的 url 来实现下载功能，但是这种用户体验非常不好。幸好，...

Scliang 2019-08-19 18:41 评论0 收藏0