window.location方法

本文详细介绍了URL的组成部分及其意义,并通过实例展示了如何利用JavaScript的window.location对象获取URL的不同部分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

window.location方法获取URL
  统一资源定位符 (Uniform Resource Locator, URL)
  完整的URL由这几个部分构成:
  scheme://host:port/path?query#fragment
  scheme:通信协议
  常用的http,ftp,maito等
  host:主机(带端口号)
  服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
  port:端口号
  整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
  path:路径
  由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
  query:查询
  可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。
  fragment:信息片断
  字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.)
  示例:
  http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#love
  1, window.location.href
  整个URl字符串(在浏览器中就是完整的地址栏)
  返回值:http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#love
  2,window.location.protocol
  URL 的协议部分
  返回值:http:
  3,window.location.host
  URL 的主机部分(带端口号),

  返回值:www.home.com:8080

          window.location.hostname

        返回值:www.home.com

  4,window.location.port
  URL 的端口部分。如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符。
  本例返回值:8080
  5,window.location.pathname
  URL 的路径部分(就是文件地址)
  返回值:/windows/location/page.html
  6,window.location.search
  查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
  返回值:?ver=1.0&id=timlq
  7,window.location.hash
  锚点
  返回值:#love
### 关于 `window.location.href` 和 `window.location` 的区别及其获取 URL 参数的方法 #### 1. **`window.location.href` 和 `window.location` 的基本概念** `window.location.href` 是 `window.location` 对象的一个属性,表示当前页面的完整 URL 地址。而 `window.location` 是一个完整的对象,包含了更多有关当前页面的信息,例如主机名 (`hostname`)、端口号 (`port`)、路径 (`pathname`) 等[^4]。 - `window.location.href`: 表示整个 URL 字符串。 - `window.location`: 提供了一个接口来访问和设置与当前页面相关的各种信息。 两者的主要区别在于: - `window.location.href` 是字符串类型,仅提供 URL 的完整表示。 - `window.location` 是一个对象,提供了更多的方法和属性来操作 URL[^3]。 --- #### 2. **如何使用 `window.location` 获取 URL 参数** ##### 方法一:通过正则表达式解析查询参数 可以编写一个通用函数,利用正则表达式从 `window.location.search` 中提取指定名称的参数值。 ```javascript function getUrlParameter(name) { const regex = new RegExp(`[?&]${encodeURIComponent(name)}=([^&#]*)`); const results = regex.exec(window.location.search); return results === null ? null : decodeURIComponent(results[1]); } // 示例调用 const paramValue = getUrlParameter('key'); // 替换 'key' 为你想获取的参数名 console.log(paramValue); ``` 这种方法适用于简单的键值对形式的查询字符串,并能够正确处理编码字符[^1]。 --- ##### 方法二:分割查询字符串并手动查找目标字段 如果不希望通过正则表达式实现,还可以通过对 `window.location.search` 的子串操作完成同样的功能。 ```javascript function getQueryValue(key) { const queryStr = window.location.search.substring(1); // 去掉开头的 '?' const pairs = queryStr.split('&'); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); if (decodeURIComponent(pair[0]) === key) { // 比较解码后的键名 return decodeURIComponent(pair[1]); // 返回对应的值 } } return null; // 如果未找到,则返回 null } // 示例调用 const value = getQueryValue('paramName'); // 替换 'paramName' 为实际参数名 console.log(value); ``` 这种方式适合于逐项对比需求较为简单的场景[^2]。 --- ##### 方法三:使用现代浏览器支持的 `URLSearchParams` API 在较新的环境中(如主流桌面端/移动端浏览器),推荐使用内置的 `URLSearchParams` 接口简化操作流程。 ```javascript function getUrlParam(paramName) { const params = new URLSearchParams(window.location.search); // 创建 URLSearchParams 对象 return params.get(paramName); // 调用 .get() 方法传入要找寻的名字即可得到对应的结果 } // 示例调用 const result = getUrlParam('searchKey'); // 替换 'searchKey' 为目标参数名 console.log(result); ``` 该方案不仅语义清晰,而且性能优越,在兼容性允许的情况下优先选用它来进行开发工作[^4]。 --- #### 3. **总结** `window.location.href` 和 `window.location` 各自扮演着不同的角色: - `window.location.href` 更加专注于 URL 的整体表现形式; - `window.location` 则是一个更为强大的工具集,允许开发者深入挖掘 URL 的各个组成部分。 至于获取 URL 参数的具体实现方式,可以根据项目的实际情况和个人偏好选择合适的技术路线——无论是传统的正则匹配还是现代化的 `URLSearchParams` API,都能满足日常开发中的绝大多数需求。 --- ###
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值