Get current URL with jQuery?
我正在使用jquery。如何获取当前URL的路径并将其分配给变量?
示例URL:
1 | http://localhost/menuname.de?foo=bar&number=0 |
要获取路径,可以使用:
1 2 3 | var pathname = window.location.pathname; // Returns path only (/path/example.html) var url = window.location.href; // Returns full URL (https://example.com/path/example.html) var origin = window.location.origin; // Returns base URL (https://example.com) |
纯jquery样式:
1 | $(location).attr('href'); |
location对象还具有其他属性,如主机、哈希、协议和路径名。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | http://www.refulz.com:8082/index.php#tab2?foo=789 Property Result ------------------------------------------ host www.refulz.com:8082 hostname www.refulz.com port 8082 protocol http: pathname index.php href http://www.refulz.com:8082/index.php#tab2 hash #tab2 search ?foo=789 var x = $(location).attr('<property>'); |
只有当您有jquery时,这才有效。例如:
1 2 3 4 5 6 7 | <html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> $(location).attr('href'); // http://www.refulz.com:8082/index.php#tab2 $(location).attr('pathname'); // index.php </html> |
如果需要URL中存在的哈希参数,那么
1 2 3 4 5 | window.location.pathname => /search window.location.href => www.website.com/search#race_type=1 |
您需要使用javascript的内置
只需在javascript中添加此函数,它将返回当前路径的绝对路径。
1 2 3 4 5 | function getAbsolutePath() { var loc = window.location; var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1); return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length)); } |
我希望它对你有用。
window.location是javascript中的一个对象。它返回以下数据
1 2 3 4 5 6 | window.location.host #returns host window.location.hostname #returns hostname window.location.path #return path window.location.href #returns full current url window.location.port #returns the port window.location.protocol #returns the protocol |
在jquery中,您可以使用
1 2 3 4 5 6 | $(location).attr('host'); #returns host $(location).attr('hostname'); #returns hostname $(location).attr('path'); #returns path $(location).attr('href'); #returns href $(location).attr('port'); #returns port $(location).attr('protocol'); #returns protocol |
这是一个比许多人想象的更复杂的问题。一些浏览器支持内置的javascript定位对象和通过
因此,如果您有jquery可用并已加载,那么您也可以像其他人提到的那样使用jquery(location),因为它可以解决这些问题。但是,如果您正在通过javascript(即使用Google Maps API和位置对象方法)执行一些客户端地理位置重定向,那么您可能不希望加载整个jquery库并编写条件代码来检查Internet Explorer/firefox/等的每个版本。
InternetExplorer让前端的编码猫不高兴,但jquery是一盘牛奶。
仅用于主机名,请使用:
1 | window.location.hostname |
这也适用于:
1 | var currentURL = window.location.href; |
Java脚本提供了许多检索当前URL的方法,这些URL显示在浏览器的地址栏中。
测试URL:
1 2 3 4 5 6 | http:// stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762 ? rq=1&page=2&tab=active&answertab=votes # 32942762 |
1 2 3 | resourceAddress.hash(); console.log('URL Object ', webAddress); console.log('Parameters ', param_values); |
功能:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | var webAddress = {}; var param_values = {}; var protocol = ''; var resourceAddress = { fullAddress : function () { var addressBar = window.location.href; if ( addressBar != '' && addressBar != 'undefined') { webAddress[ 'href' ] = addressBar; } }, protocol_identifier : function () { resourceAddress.fullAddress(); protocol = window.location.protocol.replace(':', ''); if ( protocol != '' && protocol != 'undefined') { webAddress[ 'protocol' ] = protocol; } }, domain : function () { resourceAddress.protocol_identifier(); var domain = window.location.hostname; if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') { webAddress[ 'domain' ] = domain; var port = window.location.port; if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') { if(protocol == 'http') port = '80'; if(protocol == 'https') port = '443'; } webAddress[ 'port' ] = port; } }, pathname : function () { resourceAddress.domain(); var resourcePath = window.location.pathname; if ( resourcePath != '' && resourcePath != 'undefined') { webAddress[ 'resourcePath' ] = resourcePath; } }, params : function () { resourceAddress.pathname(); var v_args = location.search.substring(1).split("&"); if ( v_args != '' && v_args != 'undefined') for (var i = 0; i < v_args.length; i++) { var pair = v_args[i].split("="); if ( typeOfVar( pair ) === 'array' ) { param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] ); } } webAddress[ 'params' ] = param_values; }, hash : function () { resourceAddress.params(); var fragment = window.location.hash.substring(1); if ( fragment != '' && fragment != 'undefined') webAddress[ 'hash' ] = fragment; } }; function typeOfVar (obj) { return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase(); } |
- 协议?Web浏览器通过遵循Web托管应用程序和Web客户端(浏览器)之间的一些通信规则来使用Internet协议。(http=80,https(ssl)=443,ftp=21等)
例如:使用默认端口号
1 2 3 | <protocol>//<hostname>:<port>/<pathname><search><hash> https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy http://stackoverflow.com:80/ |
- (/)主机是指互联网上的一个端点(资源所在的机器)的名称。www.stackoverflow.com-应用程序(或)localhost的DNS IP地址:8080-localhost
域名是根据域名系统(DNS)树的规则和过程注册的。为寻址目的使用IP地址管理您的域的人的DNS服务器。在DNS服务器层次结构中stackoverfow.com的根名称是com。
1 | gTLDs - com ? stackoverflow (OR) in ? co ? google |
本地系统必须维护不在主机文件中公开的域。
myLocalApplication.com 172.89.23.777
- (/)?路径提供有关Web客户端要访问的主机内特定资源的信息
- (?)?可选查询是传递由分隔符(&;)分隔的属性-值对序列。
- (?)可选的片段通常是特定元素的id属性,Web浏览器会将该元素滚动到视图中。
如果参数有一个epoch
1 | var epochDate = 1467708674; var date = new Date( epochDate ); |
网址MGXY1〔0]
如果usernaem/password包含@symbol,则使用username:password的身份验证URL像:
1 2 | Username = `my_email@gmail` Password = `Yash@777` |
然后您需要URL将
1 | http://my_email%40gmail.com:Yash%[email protected]_site.com |
1 2 3 4 5 6 7 8 9 10 11 | var testURL ="http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762"; var Uri ="/:@?&=,#", UriComponent ="$;+", Unescaped ="(-_.!~*')"; // Fixed var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped); var encodeURIComponent_Str = encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped ); console.log(encodeURI_Str, ' ', encodeURIComponent_Str); /* /:@?&=,# +$; (-_.!~*') %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*') */ |
您可以记录window.location并查看所有选项,只需使用以下URL即可:
1 | window.location.origin |
对于整个路径使用:
1 | window.location.href |
还有位置。__
1 2 3 4 | .host .hostname .protocol .pathname |
这将使用javascript/jquery返回当前页面的绝对URL。
document.URL $("*").context.baseURI location.href
如果有人想要连接URL和哈希标记,请组合两个函数:
1 | var pathname = window.location.pathname + document.location.hash; |
我要去掉get变量。
1 2 | var loc = window.location; var currentURL = loc.protocol + '//' + loc.host + loc.pathname; |
您只需使用JS本身获取路径,
1 2 3 | console.log("Origin -",location.origin); console.log("Entire URL -",location.href); console.log("Path Beyond URL -",location.pathname); |
要从iframe中获取父窗口的URL,请执行以下操作:
1 | $(window.parent.location).attr('href'); |
注意:仅在同一域上工作
下面是一个使用jquery和javascript获取当前URL的示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function() { //jQuery $(location).attr('href'); //Pure JavaScript var pathname = window.location.pathname; // To show it in an alert window alert(window.location); }); $.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){ //alert(json.message); }); |
1 | var currenturl = jQuery(location).attr('href'); |
使用window.location.href。这将提供完整的URL。
以下是可以使用的有用代码片段的示例-其中一些示例使用标准的javascript函数,并且不特定于jquery:
请参阅8个有用的jquery片段以了解URL的查询字符串。
window.location将为您提供当前的URL,您可以从中提取所需的内容…
参见Pr.js。这确实有帮助,也可以使用,这取决于jquery。这样使用:
1 | $.url().param("yourparam"); |
如果要获取根站点的路径,请使用以下命令:
1 | $(location).attr('href').replace($(location).attr('pathname'),''); |
最常用的前三种是
1 2 3 | 1. window.location.hostname 2. window.location.href 3. window.location.pathname |
1 | var newURL = window.location.protocol +"//" + window.location.host +"/" + window.location.pathname; |
所有浏览器都支持javascript窗口对象。它定义了浏览器的窗口。
全局对象和函数自动成为窗口对象的一部分。
所有全局变量都是窗口对象属性,所有全局函数都是其方法。
整个HTML文档也是一个窗口属性。
因此,可以使用window.location对象获取所有与URL相关的属性。
JavaScript
1 2 3 4 5 6 | console.log(window.location.host); //returns host console.log(window.location.hostname); //returns hostname console.log(window.location.pathname); //return path console.log(window.location.href); //returns full current url console.log(window.location.port); //returns the port console.log(window.location.protocol) //returns the protocol |
JQuery
1 2 3 4 5 6 | console.log("host ="+$(location).attr('host')); console.log("hostname ="+$(location).attr('hostname')); console.log("pathname ="+$(location).attr('pathname')); console.log("href="+$(location).attr('href')); console.log("port ="+$(location).attr('port')); console.log("protocol ="+$(location).attr('protocol')); |
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> |
1 2 3 4 5 | // get current URL $(location).attr('href'); var pathname = window.location.pathname; alert(window.location); |
在JSTL中,我们可以使用
1 | url ="${pageContext.request.contextPath}" +"/controller/path" |
例:在