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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解javascript常用工具类的封装
Jan 30 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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版(2)
2006/10/09 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
php自动加载代码实例详解
2021/02/26 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Vue实现简单分页器
2018/12/29 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
学python最电脑配置有要求么
2020/07/05 Python
python Selenium 库的使用技巧
2020/10/16 Python
python中pow函数用法及功能说明
2020/12/04 Python
python中操作文件的模块的方法总结
2021/02/04 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
副科级后备干部考察材料
2014/05/15 职场文书
企业战略合作意向书
2015/05/08 职场文书
摩登时代观后感
2015/06/03 职场文书
2015年中秋节主持词
2015/07/30 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python