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编程起步(第五课)
Jan 10 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
Element PageHeader页头的使用方法
Jul 26 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校验ISBN码的函数代码
2011/01/17 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python中subprocess批量执行linux命令
2018/04/27 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python函数参数操作详解
2018/08/03 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
校长就职演讲稿
2014/01/06 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL