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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
JS实现的base64加密解密操作示例
Apr 18 Javascript
vuex的module模块用法示例
Nov 12 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Python中的类学习笔记
2014/09/23 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python实现画图软件功能方法详解
2020/07/28 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
揠苗助长教学反思
2014/02/04 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
活动策划求职信模板
2014/04/21 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
汇报材料怎么写
2014/12/30 职场文书
走进科学观后感
2015/06/18 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
MySQL中的隐藏列的具体查看
2021/09/04 MySQL