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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
对python3 urllib包与http包的使用详解
2018/05/10 Python
简单了解python协程的相关知识
2019/08/31 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
什么是反射
2012/03/17 面试题
同事吵架检讨书
2014/02/05 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
服务承诺书格式
2014/05/21 职场文书
企业安全标语
2014/06/07 职场文书