window.location or window.location.href?

参考:1.http://www.javascriptkit.com/jsref/location.shtml
         2.http://www.highdots.com/forums/javascript-discussion-multi-lingual/window-location-window-location-href-276539.html

 

 

写道
Location contains information about the current URL of the browser. The most common usage of Location is simply to use it to automatically navigate the user to another page:

<script type="text/javascript">
window.location="http://www.google.com"
</script>

 

所以推荐使用window.location,包含更多信息

 

理由(参考文章的第二篇)

写道
Although "window.location.href" also seems to work. The "entire URL"
href property (of window.location) appears to be a bit redundant. Other
properties of "windows.location" could be useful for reading or changing
portions of the URL like domain/host names and port numbers (which are
sometimes not stated - permitted to remain the default).

 

 

--EOF--

 

 

### 关于 `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,都能满足日常开发中的绝大多数需求。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值