JS_js获取当前完整的url地址及获取url地址中各个部分，window.location对象详解

最新推荐文章于 2025-03-24 20:17:47 发布
最新推荐文章于 2025-03-24 20:17:47 发布
阅读量3.1k 收藏 4
点赞数
分类专栏： # JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44599931/article/details/117414784
版权 
window.location.host; //（域名 + 端口）返回url 的主机部分，例如：www.xxx.com 

window.location.hostname; //（域名）返回www.xxx.com 

window.location.href; //（当前URL）返回整个url字符串(在浏览器中就是完整的地址栏)，例如：www.xxx.com/index.php?class_id=3&id=2 

window.location.pathname; //（路径部分）返回/a/index.php或者/index.php 

window.location.protocol; //（协议）返回url 的协议部分，例如： http:，ftp:，maito:等等。 

window.location.port //（端口）url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符

window.location.search //（请求的参数） ?id=123&username=xxx

获取url地址参数

【JavaScript】window.location详解
a451319296的博客
08-05 9493
在网页浏览器环境中，window.location是一个指向当前窗口的Location对象。它提供了一系列属性和方法，用于获取和操作当前页面的URL信息。
详解javascript获取url信息的常见方法
10-20
window.location.host获取的是包括端口的域名部分（如果URL中有端口的话），而document.domain则是获取域名的主域部分，它常被用于跨域问题中。例如： ```javascript var host = window.location.host; // 包括端口...
js获取当前域名，url，相对路径和参数
weixin_44934844的博客
04-02 775
一 .js获取当前域名有2种方法 方法一 var domain = document.domain; 方法二 var domain = window.location.host; 注意问题 由于获取到的当前域名不包括 http://，所以把获取到的域名赋给 a 标签的 href 时，别忘了加上 http://，否则单击链接时导航会出错。 二、获取当前Url的4种方法 va...
JS 获取当前页面的URL
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2292540
JavaScript Window Location
最新发布
m0_72763148的博客
03-24 488
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
weixin_34067102的博客
08-10 806
1，设置或获取对象指定的文件名或路径。 alert(window.location.pathname) 2，设置或获取整个 URL 为字符串。 alert(window.location.href); 3，设置或获取与 URL 关联的端口号码。 alert(window.location.port) 4，设置或获取 URL 的协议部分。 alert(window.location.p...
js得到当前页面的url信息方法(JS获取当前网址信息)
06-12 201
1、设置或获取整个 URL 为字符串： window.location.href 2、设置或获取与 URL 关联的端口号码： window.location.port 3、设置或获取 URL 的协议部分 window.location.protocol 4、设置或获取 href 属性中跟在问号后面的部分 window.location.search ...
js Window学习（三）Window Location对象
sungang1120的专栏
05-17 197
Window Location window.location 对象在编写时可不使用 window 这个前缀。 一些例子： location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 （80 或 443） location.protocol 返回所使用的 we...
JS获得当前地址栏url+完整获取解说
zzq0341的专栏
11-02 438
URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成： scheme://host:port/path?query#fragment scheme:通信协议 常用的http,ftp,maito等 host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。 port:端口号 整数，可选，省...
JavaScript编程中window的location与history对象详解
10-23
总之，location和history对象在JavaScript编程中扮演着非常重要的角色，它们不仅能够帮助开发者获取和操作URL信息，还能通过控制浏览器历史记录来提高用户在网页间的导航体验。对于JavaScript初学者而言，掌握这两个...
详解Angular中通过$location获取地址栏的参数
10-18
总结来说，Angular中的$location服务和JavaScript的`window.location`对象都是处理URL的重要工具，它们帮助开发者轻松地获取和操作URL中的各种信息。理解并熟练使用这些方法，能够更好地实现页面间的导航和数据传递...
js获取当前浏览器地址，ip，端口号等等
weixin_44727080的博客
07-02 3959
js获取当前浏览器地址，ip，端口号等等。
最详细的js获取当前url的方法
你若为我繁华，我愿成你烟花
11-14 1662
1、window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); 返回：http://i.cnblogs.com/EditPosts.aspx?opt=1 2、window.location.protocol(设置或获取 URL 的协议部分) var test = window.loc...
js之获取当前页面的url网址
辽辽无期的博客
02-26 1250
【代码】js之获取当前页面的url网址。
使用 JavaScript 获取当前 URL？
HuntsBot的博客
12-19 2518
我想要的只是获取网站 URL。不是从链接中获取的 URL。在页面加载时，我需要能够获取网站的完整当前 URL，并将其设置为变量以随意使用。
学习使用js获取当前ip地址的方法,使用第三方API获取ip地址
徊忆羽菲
03-15 3111
学习使用js获取当前ip地址的方法,使用第三方API获取ip地址
【基础】js 获取当前地址或IP
weixin_38942461的博客
12-11 1058
【基础】js 获取当前地址或IP
js 获取url的多种方式
架构师：通透，才能写出好代码！
05-22 3085
js 获取url的多种方式。
js获取地址栏url
03-20
### JavaScript 获取当前页面 URL 地址栏 在 JavaScript 中，`window.location` 是用于操作当前窗口或框架的位置的对象。通过 `window.location.href` 可以轻松获取当前页面的完整 URL 地址。 以下是具体的实现方式： ```javascript // 定义一个函数来返回当前页面的完整 URL function getCurrentUrl() { return window.location.href; } console.log(getCurrentUrl()); ``` 上述代码展示了如何利用 `window.location.href` 来获取当前页面的完整 URL[^1]。 如果需要进一步解析 URL 参数，则可以结合正则表达式或其他内置对象完成更复杂的任务。例如，下面是一个通用方法用来提取特定键对应的值： ```javascript // 获取 URL 参数中的指定键值 function getUrlParameter(name) { const regex = new RegExp(`[?&]${name}=([^&#]*)`); const results = regex.exec(window.location.href); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } // 测试调用 const paramName = "example"; console.log(`${paramName} 的值为:`, getUrlParameter(paramName)); ``` 此部分逻辑基于正则匹配技术实现了单独查询某项参数的功能[^4]。 另外还有一种现代化的方式是借助 `URLSearchParams` 接口来进行批量或者单项读取工作： ```javascript // 使用 URLSearchParams 解析整个 URL 查询字符串并转换成对象形式 function parseQueryToObject(urlString) { const queryString = urlString.split('?')[1]; const searchParams = new URLSearchParams(queryString); // 将其转化为标准 JSON 对象结构 const result = {}; for (let pair of searchParams.entries()) { result[pair[0]] = pair[1]; } return result; } // 调试打印结果 const fullUrl = "https://test.com/path/to/resource?key=value&anotherkey=anothervalue"; console.log(parseQueryToObject(fullUrl)); ``` 这种方法不仅简洁明了而且兼容性较好，在大多数现代浏览器环境下均能正常运行[^3]。 #### 注意事项 对于某些特殊场景比如跨域加载资源文件等情况可能涉及到安全策略限制等问题需额外注意处理机制差异带来的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值