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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jquery预加载图片的方法
May 27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
简单的JS轮播图代码
Jul 18 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
详解Node.JS模块 process
Aug 31 Javascript
javascript实现多边形碰撞检测
Oct 24 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 header函数分析详解
2011/08/06 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
专业毕业生个性的自我评价
2013/10/03 职场文书
运动会通讯稿300字
2014/02/02 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
访谈节目策划方案
2014/05/15 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫