[JS]window.location获取url各项参数详解

时间：2022-10-19 13:38:21

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各项参数详解的更多相关文章

  1. Arison &lbrack;JS&rsqb;window&period;location获取url各项参数详解

    https://www.cnblogs.com/Arison/p/5286368.html 对于这样一个URL代码如下 复制代码 http://www.php230.com :80/fisker/po ...

  2. window&period;location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  3. Angular中通过&dollar;location获取地址栏的参数详解

    Angular中通过$location获取url中的参数 最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研 ...

  4. window&period;location获取URL中各部分

    博客分类: JAVASCRIPT JavaScriptASP.netSchemeASP网络协议  URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL ...

  5. 转&colon;asp&period;net获取url各项参数

    假设当前页完整地址是:http://www.test.com/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.te ...

  6. JMeter中聚合报告的各项参数详解

    下面我们来共同学习这些参数的作用: 1.Lable:Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值: ...

  7. js获取url中参数名也参数值

    要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法.   在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...

  8. js获取url的参数和值的N种有效方法

    js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...

  9. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

随机推荐

  1. metadata lock

    1 锁等待的例子 session 1: 执行查询但不提交 mysql> begin; mysql> select * from test where c2 = '1'; session 2 ...

  2. Review PHP设计模式之——注册模式

    注册模式: class DbConnections{ var $_store = array(); public function isValid($key) { return isset($this ...

  3. 替代 yunio &comma; 推荐一个国外的云存储（同步盘） wuala（这个网站也挂了）——功能评测非常全面

    替代 yunio , 推荐一个国外的云存储(同步盘) wuala 话说自从云诺开始收费后,我的文件便再没同步或备份过,前天没事便找了一下,发现一个国外的网盘,注册送 5 G 空间(对我来说同步日常文件 ...

  4. PADS Layout VX&period;2&period;3 更改Logic符号，并更新到原理图

    操作系统:Windows 10 x64 工具1:PADS Layout VX.2.3 统一使用A3尺寸的原理图,如果Logic符号画得太大,就会占用过多的面积.如下图所示,电阻的两只引脚的跨度占用了4 ...

  5. JS中的特殊类别注意区分

    undefined和null 在JavaScript中存在这样两种原始类型:Null与Undefined. 这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是 ...

  6. 基于 SOA 概念 RPC 框架 的 消息中心 云部署 设计 漫谈

    一.背景 假设有一个系统的最大并发量有2000TPS左右.同时该系统有闲时和忙时,希望可以随时进行拓展和削减服务能力,以节省服务器费用开销. 该系统能提供站内消息.短信.app消息.邮箱的一个消息系统 ...

  7. SparkSQL demo

    1.数据样本:data1.txt xiaoming,25,chengduxiaohua,23,beijingliuyang,16,hangzhouxiaoqiang,19,zhejiang 2.dem ...

  8. AngularJS图片上传功能实践

    逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值 1.HTML <input ty ...

  9. rsyslog 配置 二

    转自:https://www.cnblogs.com/cherishry/p/6775163.html rsyslog 配置 二 # rsyslog configuration file # For ...

  10. 原来这是一个经典面试题-------Day61

    前几天在table的操作中,记录了动态生成表格的三种方式: 1.html语言的拼接:用字符串或者数组拼接在html语言中,这个理解起来最直观 2.插入行和列:insertRow()和insertCel ...

相关文章