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 imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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与XML联手进行网站编程代码实例
2008/07/10 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JQuery live函数
2010/12/24 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
python函数超时自动退出的实操方法
2020/12/28 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
生产部统计员岗位职责
2014/01/05 职场文书
终止劳动合同通知书
2015/04/16 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
800字作文之大雪
2019/12/04 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android