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=123var parsedUrl = new URL('https://cn.bing.com?id=123v');console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id")); // 123console.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.htmllet 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);objectA File, Blob or MediaSource object to create an object URL for.returnA 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);objectURLA DOMString representing a object URL that was previously created by calling createObjectURL().return ubdefined