[JS]window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法。
URL即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
http://localhost/test/test.htm?id=1
代码如下 复制代码
<html>
<head>
</head>
<body>
<script languge=javascript>
alert(window.location.pathname); --返回 /test/test.htm
alert(window.location.search); --返回 ?id=1
alert(window.location.href); --返回 http://localhost/test/test.htm?id=1
</script>
</body>
</html>
location对象 含有当前URL的信息. 属性 href 整个URL字符串.
protocol 含有URL第一部分的字符串,如http:
host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
hostname 包含URL中主机名的字符串.如http://www.cenpok.net ;
port 包含URL中可能存在的端口号字符串.
pathname URL中"/"以后的部分.如~list/index.htm
hash "#"号(CGI参数)之后的字符串.
search "?"号(CGI参数)之后的字符串.
对于这样一个URL
代码如下 复制代码
http://www.php230.com :80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值:
代码如下 复制代码
http://www.php230.com :80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
URL 的协议部分
本例返回值:http:
3,window.location.host
URL 的主机部分
本例返回值:www.php230.com
4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:""
5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6
7,window.location.hash
锚点
本例返回值:#imhere
项目中的应用:
//获取页面根目录的下一级目录
//页面地址:http://192.168.2.98:8020/house-wap/src/main/webapp/user/userCenter.html
//所获取的地址:http://192.168.1.105:6082/house-wap/
function getRootPath(){
var pathName = window.location.pathname.substring(1);
console.log(pathName);
if(pathName == '') {
webname=''
}else{
webName=pathName.substring(0, pathName.indexOf('/'))
};
console.log(webName);
return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';
}
[JS]window.location获取url各项参数详解的更多相关文章
- Arison [JS]window.location获取url各项参数详解
https://www.cnblogs.com/Arison/p/5286368.html 对于这样一个URL代码如下 复制代码 http://www.php230.com :80/fisker/po ...
- window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- Angular中通过$location获取地址栏的参数详解
Angular中通过$location获取url中的参数 最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研 ...
- window.location获取URL中各部分
博客分类: JAVASCRIPT JavaScriptASP.netSchemeASP网络协议 URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL ...
- 转:asp.net获取url各项参数
假设当前页完整地址是:http://www.test.com/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.te ...
- JMeter中聚合报告的各项参数详解
下面我们来共同学习这些参数的作用: 1.Lable:Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值: ...
- js获取url中参数名也参数值
要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法. 在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...
- js获取url的参数和值的N种有效方法
js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...
- js获取url地址栏参数
前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...
随机推荐
- 专注UI——是alert()打败了你!
在上家公司.常常在页面上写aler()提示代码.没有认为有什么,好寻常.认为提示就本来应该是这种,可是,当我到了这家公司.在測试的时候,由于測试人员看到了一个aler弹出框.结果我的页面被退回重写,后 ...
- 逆向工程之App脱壳
http://www.cnblogs.com/ludashi/p/5725743.html iOS逆向工程之App脱壳 本篇博客以微信为例,给微信脱壳."砸壳"在iOS逆向工程中是 ...
- Easyui 页面訪问慢解决方式,GZIP站点压缩加速优化
1. 静态资源压缩GZIP是站点压缩加速的一种技术,对于开启后能够加快我们站点的打开速度.原理是经过server压缩,client浏览器高速解压的原理,能够大大降低了站点的流量. 详细代码能够參加je ...
- poj3254Corn Fields
Corn Fields Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13765 Accepted: 7232 Desc ...
- spring web中的filter
昨天看了会spring web中部分代码,主要是各种filter,回顾一下: Spring的web包中中有很多过滤器,这些过滤器位于org.springframework.web.filter并且理所 ...
- Webservice 的安全策略
摘自:http://www.cnblogs.com/shengel/archive/2008/11/20/1337723.html Webservice为作为方便的服务被用广大领域使用的同时, ...
- 38. ExtJS学习(四)EditorGrid可编辑表格
转自:https://blog.csdn.net/qq_30739519/article/details/50865060
- windows下写的脚本,在linux下执行失败
Windows中的换行符为CRLF, 即正则表达式的rn(ASCII码为13和10), 而Unix(或Linux)换行符为LF, 即正则表达式的n. 在Windows和Linux下协同工作的时候, 往 ...
- 当下较热web前端技术汇总
Web前段技术发展很快,主流技术日新月异,想想自己刚毕业那会用的asp技术,现在已经很少有主流网站在使用了.再到后来的J2EE框架,然后SpringMVC大行其道,但是最近各种js框架被广为传播,Ht ...
- Vue.js中学习使用Vuex详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...