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 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python实现五子棋游戏
2019/06/18 Python
python实现大文本文件分割
2019/07/22 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
青年文明号事迹材料
2014/01/18 职场文书
车辆转让协议书
2014/04/15 职场文书
给校长的建议书200字
2014/05/16 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
公司2015年终工作总结
2015/05/26 职场文书
2019初中学生入团申请书
2019/06/27 职场文书