URL API
URL API 是一个 URL 标准的组件,它定义了有效的Uniform Resource Locator和访问、操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念,并尝试以标准的方式去描述用于以键/值对的形式提交 web 表单内容的遗留application/x-www-form-urlencoded
MIME type 。
URL 的概念和用法
URL 标准的主要内容是由 URL 的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义,并指定了解析 IP 地址和 DOM 地址的算法。大多数开发人员更感兴趣的是 API 本身。
使用 URL 组件
修改 URL
查询
search
属性在 URL 上包含 URL 的查询字符串部分。例如,如果 URL 是https://mysite.com/login?user=someguy&page=news
,那么search
属性的值是?user=someguy&page=news
。你还可以使用 URLSearchParams
对象的 get()
查找单个参数的值:
let addr = new URL("https://mysite.com/login?user=someguy&page=news"); try { loginUser(addr.searchParams.get("user")); gotoPage(addr.searchParams.get("page")); } catch(err) { showErrorMessage(err); }
例如,在上面的代码片段中,从查询中提取用户名和目标页面,并将其传递给适当的函数,站点代码使用这些函数登录并将用户路由到站点的目的页面。
URLSearchParams
中的其他函数允许修改改、添加和删除键和值,甚至对参数列表进行排序。
URL API 接口
URL API 是一个简单的 API,它的名字只有几个接口:
该规范的旧版本包括一个名为URLUtilsReadOnly
(en-US)的接口,该接口已经合并到WorkerLocation
(en-US) 接口中。
例子
如果希望处理 URL 中包含的参数,可以手动进行处理,但是创建一个 URL 对象更容易。下面的fillTableWithParameters()
函数接受一个表示<table>
的 HTMLTableElement
对象作为输入。将行添加到表中,每个行对应参数中找到的键,第一列包含键,第二列包含值。
注意,在生成表之前调用 URLSearchParams.sort()
对参数列表进行排序。
js
function fillTableWithParameters(tbl) {
let url = new URL(document.location.href);
url.searchParams.sort();
let keys = url.searchParams.keys();
for (let key of keys) {
let val = url.searchParams.get(key);
let row = document.createElement("tr");
let cell = document.createElement("td");
cell.innerText = key;
row.appendChild(cell);
cell = document.createElement("td");
cell.innerText = val;
row.appendChild(cell);
tbl.appendChild(row);
}
}
在 found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向 URL 添加参数,就可以在表中看到它们。例如,试试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable
。
规范
Specification |
---|
URL Standard # api |
浏览器兼容性
BCD tables only load in the browser