0
点赞
收藏
分享

微信扫一扫

H5 - URL

先科普下

什么是URL:

MDN - 统一资源定位器(URL)是指在Internet上可以找到资源的位置的文本字符串。

通俗点说就是浏览器上边的地址。

URL也可以用于文件传输(FTP),电子邮件(SMTP)和其他应用。

组成部分:

一个URL由不同的部分组成,其中一些是必须的,而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分:

<!-路径->
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

H5 - URL_html

​http://​​​ 是协议。它表明了浏览器必须使用何种协议。它通常都是HTTP协议或是HTTP协议的安全版,即HTTPS。Web需要它们二者之一,但浏览器也知道如何处理其他协议,比如​​mailto:(打开邮件客户端)或者 ​​​​ftp:(处理文件传输),所以当你看到这些协议时,不必惊讶。​

 

H5 - URL_锚点_02

​www.example.com​​​ 是域名。 它表明正在请求哪个Web服务器。或者,可以直接使用​​IP address​​, 但是因为它不太方便,所以它不经常在网络上使用。.

 

 

H5 - URL_锚点_03

​:80​​ 是端口。 它表示用于访问Web服务器上的资源的技术“门”。如果Web服务器使用HTTP协议的标准端口(HTTP为80,HTTPS为443)来授予其资源的访问权限,则通常会被忽略。否则是强制性的。

也就是说80和443端口可被忽略不写,其他的则必须要写。

 

 

H5 - URL_web服务器_04

​/path/to/myfile.html​​ 是网络服务器上资源的路径。在Web的早期阶段,像这样的路径表示Web服务器上的物理文件位置。

 

 

H5 - URL_锚点_05

​?key1=value1&key2=value2​​​ 是提供给网络服务器的额外参数。 这些参数是用 ​​& ​​符号分隔的键/值对列表。也就是查询参数。

 

 

H5 - URL_锚点_06

​#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)
}

H5 - URL_web服务器_07

 

** 静态属性 **

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)
}
})

 效果展示:

H5 - URL_web服务器_08


举报

相关推荐

h5基础

H5 Web Workers

h5新增标签

H5(Web Workers)

H5基础-1

H5实现轮播

0 条评论