JavaScript获取当前url路径过程解析


Posted in Javascript onDecember 27, 2019

这篇文章主要介绍了JavaScript获取当前url路径过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、假设当前页完整地址是:http://localhost:61768/Home/Index?id=2&age=18

//获取当前窗口的Url
var url = window.location.href;
//结果:http://localhost:61768/Home/Index?id=2&age=18

//获取当前窗口的主机名
var host = window.location.host;
//结果:localhost:61768

//获取当前窗口的端口
var port = window.location.port;
//结果:61768

//获取当前窗口的路径
var pathname = window.location.pathname;
//结果:/Home/Index

//获取当前文档的Url
var URL = document.URL;
//结果:http://localhost:61768/Home/Index?id=2&age=18

//获取参数
var search = window.location.search;
//结果:?id=2&age=18

2、分隔 url 中的参数

var search = window.location.search;
var age = getSearchString('age', search); //结果:18
var id = getSearchString('id', search); //结果:2
//key(需要检索的键) url(传入的需要分割的url地址,例:?id=2&age=18)
function getSearchString(key, Url) {
  var str = Url;
  str = str.substring(1, str.length); // 获取URL中?之后的字符(去掉第一位的问号)
  // 以&分隔字符串,获得类似name=xiaoli这样的元素数组
  var arr = str.split("&");
  var obj = new Object();

  // 将每一个数组元素以=分隔并赋给obj对象 
  for (var i = 0; i < arr.length; i++) {
    var tmp_arr = arr[i].split("=");
    obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
  }
  return obj[key];
}

3、跳出当前窗口

//跳出当前窗口,打开新窗口
window.open(http://www.baidu.com);

4、document与window

document默示的是一个文档对象,window默示的是一个窗口对象,一个窗口下可以有多个文档对象。

所以一个窗口下只有一个window.location.href,可能有多个document.URL、document.location.href

window.location.href 和 document.location.href 可以被赋值,然后跳转到其它页面,document.URL只能读不能赋值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
webpack external模块的具体使用
Mar 10 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
JavaScript中变量提升机制示例详解
Dec 27 #Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 #Javascript
You might like
PHP会话操作之cookie用法分析
2016/09/28 PHP
php PDO异常处理详解
2016/11/20 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JS中数据结构之栈
2019/01/01 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python collections模块实例讲解
2014/04/07 Python
Python抓取京东图书评论数据
2014/08/31 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python下载网络小说实例代码
2018/02/03 Python
Python可迭代对象操作示例
2019/05/07 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python中内建模块collections如何使用
2020/05/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
宠物店的创业计划书范文
2014/01/11 职场文书
倡议书格式
2014/04/14 职场文书
期末复习计划
2015/01/19 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
素质拓展训练感想
2015/08/07 职场文书
培训后的感想
2015/08/07 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis