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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue配置接口域名方法总结
May 12 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP4实际应用经验篇(5)
2006/10/09 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
laravel 数据验证规则详解
2019/10/23 PHP
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
pytorch之添加BN的实现
2020/01/06 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
什么是唯一索引
2015/07/05 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
工程造价专业求职信
2014/07/17 职场文书
道路施工安全责任书
2014/07/24 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
旷课检讨书500字
2014/10/14 职场文书
不同意离婚上诉状
2015/05/23 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
python 网络编程要点总结
2021/06/18 Python