window.URL对象的使用方法介绍（附示例）-tutorial js-php.cn

window.URL对象的使用方法介绍（附示例）

不言

Lepaskan： 2019-02-20 14:17:48

ke hadapan

6449 orang telah melayarinya

本篇文章给大家带来的内容是关于window.URL对象的使用方法介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1 window.URL是干嘛的？

window对象的URL对象是专门用来将blob或者file读取成一个url的。

window.URL.createObjectURL(file / blob)

Salin selepas log masuk

这个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

Salin selepas log masuk

searchParams属性返回一个URLSearchParams对象，这样就可以对url对象中的参数进行遍历或者其他操作

var urlSearchParams = URL.searchParams;

Salin selepas log masuk

3.URL实例对象的toString()方法

URL的toString()方法可以将URL转换成url字符串，且:

URL.toString() === URL.href

Salin selepas log masuk

// 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

Salin selepas log masuk

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.

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci window.URL对象的使用方法介绍（附示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!