JS获取当前浏览器URL

<!--复制地址开始-->
<script language="javascript" type="text/javascript">
function oCopy(obj){  
obj.select();  
js=obj.createTextRange();  
js.execCommand("Copy")  
}
document.writeln ("<b>本页地址</b>:<input id=/"thisweburl/" type=/"text/" size=/"68/" value=/"" + location + "/" onclick=/"oCopy(this);window.alert('复制完成,请将本页推荐给你的朋友!')/"/>")
</script>
<!--复制地址结束-->
### JavaScript 获取当前浏览器 URL 和路径的方法 在 JavaScript 中,`window.location` 对象提供了多种属性来获取当前页面的位置信息。以下是几种常见的方法: #### 1. 使用 `window.location.href` 通过访问 `window.location.href` 属性可以获取完整的 URL 地址。这是最常用的方式之一[^1]。 ```javascript var fullURL = window.location.href; console.log(fullURL); ``` 此代码会打印出当前网页的完整 URL。 --- #### 2. 使用 `window.location.pathname` 如果只需要获取 URL 的路径部分(即不包含协议、域名和查询参数的部分),可以通过 `window.location.pathname` 实现[^3]。 ```javascript var pathName = window.location.pathname; console.log(pathName); ``` 例如,在地址为 `https://example.com/folder/page.html?query=abc` 的情况下,上述代码将输出 `/folder/page.html`。 --- #### 3. 结合 HTML 页面展示 URL 为了更直观地向用户展示当前页面的完整 URL,可以在 HTML 文件中嵌入一段脚本动态更新内容[^2]。 ```html <!DOCTYPE html> <html> <body> <h2>JavaScript 示例</h2> <h3>当前页面的完整URL</h3> <p id="urlDisplay"></p> <script> document.getElementById("urlDisplay").innerHTML = "当前页面的完整URL是:<br>" + window.location.href; </script> </body> </html> ``` 运行该页面后,会在 `<p>` 标签内显示当前页面的完整 URL。 --- #### 4. 提取 URL 参数或其他部分 除了基本的 URL 或路径外,还可以利用其他 `window.location` 属性提取更多细节,比如哈希值或查询字符串[^4]。 - **Hash 值**: 如果需要获取 URL 中的片段标识符 (hash),可使用 `window.location.hash`。 ```javascript var hashValue = window.location.hash; console.log(hashValue); // 输出形如 "#section" ``` - **Search 查询串**: 若要解析 URL 后面的查询参数,则应查看 `window.location.search`。 ```javascript var queryString = window.location.search; console.log(queryString); // 输出形如 "?key=value&foo=bar" ``` --- ### 总结 以上介绍了如何通过不同的方式获取并操作当前浏览器中的 URL 及其组成部分。具体选择哪种取决于实际需求——如果是想得到整个链接就用 `href`;仅需文件夹结构或者文档名则选用 `pathname` 即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值