[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 ...
随机推荐
- starUML 2.5.1 for mac
http://www.macupdate.com/app/mac/55571/staruml/download 一直在windows下使用 star UML,占用资源少,简洁易用. Mac下也能够用了 ...
- 5分钟Serverless实践 | 构建无服务器的敏感词过滤后端系统
前言 在上一篇“5分钟Serverless实践”系列文章中,我们介绍了什么是Serverless,以及如何构建一个无服务器的图片鉴黄Web应用,本文将延续这个话题,以敏感词过滤为例,介绍如何构建一个无 ...
- 基于二叉搜索树的符号表和BST排序
原代码例如以下: #include <stdlib.h> #include <stdio.h> //#define Key int typedef int Key; struc ...
- keepalived+nginx安装配置
软件版本号: pcre8.36 ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.36.tar.gz keepalived1.2 ...
- eclipse 自己主动为getter和setter加入中文凝视
在我们使用eclipse进行开发的时候经常会使用到eclipse自己主动生成getter和setter的功能,然后大多情况下eclipse为我们生成的getter和setter都是无法在项目中使用的. ...
- ping测试局域网内主机是否alive
[root@zabbix ~]# cat alivehost.sh #!/bin/bash #Checks to see if hosts 192.168.1.100-192.168.1.200 ar ...
- Python机器学习算法 — K-Means聚类
K-Means简介 步,直到每个簇的中心基本不再变化: 6)将结果输出. K-Means的说明 如图所示,数据样本用圆点表示,每个簇的中心点用叉叉表示: (a)刚开始时是原始数据,杂乱无章 ...
- php phppowerpoint
今天早上从订阅的 Zend DevZone 看到篇很有意思的文章. Creating PowerPoint 2007 files using PHP. 试了一下. 果然很又意思, 分享给大家吧. 程序 ...
- [App Store Connect帮助]二、 添加、编辑和删除用户(3)添加和编辑用户
您可以在“用户和访问”中添加和编辑用户. 如果您以个人名义在“Apple 开发者计划”注册,您可以授权用户访问您 App Store Connect 中的内容.所有用户只拥有 App Store Co ...
- Java初级进阶中高级工程师必备技能
很多人学了javase以为自己学的已经很OK了,但是其实javase里边有很多的知识点是你不知道的,不管你找的是哪里的javase的视频,大多数是不会讲这些东西,而这些东西你平时业务又不会主动去接触, ...