JS -获取浏览器的 URL 地址栏

URL即:统一资源定位符 (Uniform Resource Locator, URL)

• 完整的URL由这几个部分构成：
  • 通信协议:常用的http,ftp,maito等
  • host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
  • port:端口号 整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
  • path:路径 由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
  • query:查询 可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开。
  • fragment:信息片断 字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

如此：我们就可以使用JavaScript来获取到URL的各个部分

1. 获取整个URL的地址栏

		console.log(window.location.href);
        console.log(document.location.href);

输出：

2. 返回 URL 通讯协议部分 protocol（http、https……）

console.log(window.location.protocol);

3. 返回URL的主机部分 host（如：域名、ip地址……）

console.log(window.location.host);

输出：

4. URL 的端口部分 prot

console.log('端口号: '+window.location.port);

输出：

5. URL 的路径部分 pathname

console.log('路径: '+window.location.pathname);

输出：

6. URL的参数部分：search (如：get请求时，显示在URL地址栏上的name属性值)

console.log('属性: '+window.location.search);

输出：