先科普下
什么是URL:
MDN - 统一资源定位器(URL)是指在Internet上可以找到资源的位置的文本字符串。
通俗点说就是浏览器上边的地址。
URL也可以用于文件传输(FTP),电子邮件(SMTP)和其他应用。
组成部分:
一个URL由不同的部分组成,其中一些是必须的,而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分:
<!-路径->
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
http://
是协议。它表明了浏览器必须使用何种协议。它通常都是HTTP协议或是HTTP协议的安全版,即HTTPS。Web需要它们二者之一,但浏览器也知道如何处理其他协议,比如mailto:(打开邮件客户端)或者
ftp:(处理文件传输),所以当你看到这些协议时,不必惊讶。
www.example.com
是域名。 它表明正在请求哪个Web服务器。或者,可以直接使用IP address, 但是因为它不太方便,所以它不经常在网络上使用。.
:80
是端口。 它表示用于访问Web服务器上的资源的技术“门”。如果Web服务器使用HTTP协议的标准端口(HTTP为80,HTTPS为443)来授予其资源的访问权限,则通常会被忽略。否则是强制性的。
也就是说80和443端口可被忽略不写,其他的则必须要写。
/path/to/myfile.html
是网络服务器上资源的路径。在Web的早期阶段,像这样的路径表示Web服务器上的物理文件位置。
?key1=value1&key2=value2
是提供给网络服务器的额外参数。 这些参数是用 &
符号分隔的键/值对列表。也就是查询参数。
#SomewhereInTheDocument
是资源本身的另一部分的锚点. 锚点表示资源中的一种“书签”,给浏览器显示位于该“加书签”位置的内容的方向。例如,在HTML文档上,浏览器将滚动到定义锚点的位置;在视频或音频文档上,浏览器将尝试转到锚代表的时间。
总结下:
可以把URL比做成一个普通的信件地址:
协议:代表你要使用的邮政服务;
域名:是一个城市或者城镇或者乡村;
路径:代表信件中要送到哪一座楼;
参数:则是提供额外的i信息,比如:大楼的所在的单位(大海阳路9号);
最后锚点:表示信件的收件人是谁。
使用URL:
1、在浏览器地址栏输入任何URL,来获取后台资源。
2、在HTML中的使用:
· 在文档中新建连接 用 <a> 标签;
· 将文档与其他资源关联,用<link> <script> 标签;
· 显示多媒体如图片<img>、视频<video>, 声音、音乐<audio>等等;
· 显示其他HTML文档,用<iframe>
URL构造函数
URL构造函数它会返回一个新创建的URL对象,这个对象包含一组关于url的信息。(类似于location)
使用:参数一必传 - url一个路径
new URL(url, [base])
参数一:可以是相对地址,也可以是绝对地址。
参数二:如果参数一url是一个相对地址,则参数二必须填写,它是作为一个基础的绝对地址出现的,与参数一拼成一个完整的路径地址。
例:
let url = new URL('name', 'https://developer.mozilla.org/zh-CN/')
console.log(url.href) // https://developer.mozilla.org/zh-CN/name
通过实例,可获取到URL中的路径信息,不常用,就不啰嗦了。
// 检查浏览器是否支持
if(window.URL) {
let url = new window.URL('https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL')
console.log(url)
}
** 静态属性 **
URL的静态属性有2个,很常用:
1、URL.createObjectURL ()
MDN:
该方法会创建一个DOMString,其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定,这个新的URL表示指定的File对象 或者 Blob对象。
官方文档向来都不是人话,来翻译一下:
说白了,该方法会返回一个url字符串,这个url字符串是表示参数对象的字符串,浏览器关闭URL销毁,其参数可以是一个File对象(上篇文章文件上传返回的File对象)或Blob对象或者MediaSource对象。
用法:
let obejctURL = new createObjectURL(object)
参数:
用于创建URL的File对象、Blob对象、或者 MediaSource对象
返回值:
一个DOMString包含了一个对象的URL,该URL的作用是:指定源object的内容。
2、URL.revokeObjectURL()
URL.revokeObjectURL() 是用来释放创建出来的URL对象的,参数是:之前URL.createObjectURL() 创建出来的对象。
先来看下内存管理:
在每次调用createObjectURL()方法时,都会创建出一个新的URL对象,即便是你使用相同的对象作为参数创建过。
当不在需要这些URL对象时,每个对象必须通过调用URL.createObjectURL()来销毁释放它。
浏览器在document写在的时候,会自动的释放它们,但是为了获得最佳性能和内存使用情况,应该在安全的时机来主动释放掉他们。。。
一个小案例:
1、图片上传显示缩略图:
使用createObjectURL来创建一个描述File对象的URL,然后把图片显示到浏览器,等图片加载完成后在销毁创建出来的objectURL
<input type="file" id="file">
<div id="img-box"></div>
<script>
let file = document.getElementById('file'),
imgBox = document.getElementById('img-box');
file.addEventListener('change', (e) => {
let img = new Image()
let files = e.target.files[0]
if (window.URL) {
let objectURL = URL.createObjectURL(files)
img.onload = () => {
URL.revokeObjectURL(objectURL)
}
img.src = objectURL
imgBox.appendChild(img)
}
})
效果展示: