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学习3:操作元素属性和特性
Feb 07 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
AngularJS表单验证功能
Oct 19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
vue 实现走马灯效果
Oct 28 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
第五节 克隆 [5]
2006/10/09 PHP
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JSON取值前判断
2014/12/23 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python处理“
2019/06/10 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
军训的自我鉴定
2013/12/10 职场文书
材料会计岗位职责
2014/03/06 职场文书
联片教研活动总结
2014/07/01 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书