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语言本身谈项目实战
Dec 27 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 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
2019十大人气国漫
2020/03/13 国漫
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
js设置和获取自定义属性的方法
2016/10/20 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
谈谈JS中的!!
2017/12/07 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python中rb含义理解
2020/06/18 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
节能减排倡议书
2014/04/15 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
教育教学工作反思
2016/02/24 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers