JS是由DOM(文档对象模型)、BOM(浏览器对象模型)、以及ECMA组成,而location对象是BOM中的一个非常重要的对象,所有关于地址栏信息的内容都在这里。了解location对象之前让我们先来了解下URL地址的组成。“http://1.11.111.11:8080/locationtest/locationtest.html?id=1234&name=abcd“; 以此为例,URL地址由协议、域名、端口、路径、参数、哈希等组成。下面我们就从location各个对象的属性来分析下这地址。

对象属性:

  location.href = “http://1.11.111.11:8080/locationtest/locationtest.html?id=1234&name=abcd“; (整个URL路径)
location.origin = “http://1.11.111.11:8080“; (协议名称及主机名称、端口号)
location.host = “1.11.111.11:8080”; (主机名称和端口号)location.port = “8080”; (端口号)location.hostname = “1.11.111.11”;(主机名称)location.search= “?id=1234&name=abcd”; (问号 (?) 之后的部分)location.pathname = “/locationtest/locationtest.html”; (路径)location.protocol = “http:”; (设置或返回URL路径的协议)location.hash = “#hash”; (哈希,#代表网页中的一个位置。其右面的字符,就是该位置的标识符;#是用来指导浏览器动作的)

对象方法:

location.reload(true); (重新加载当前文档)
// true 表示强制刷新强制加载 ,就是得到服务器去重新请求数据
// false 是从本地读取缓存

location.replace(“locationtest2.html”);
(以新的文档替换当前文档,替换后浏览器回退功能不会回退到之前的文档;注意参数值如果不加协议名称,如:location.replace(“www.baidu.com”);将不会跳转,会在当前文档的目录路径下去寻找”www.baidu.com”这个新文档,如果没有会404;修改成location.replace(“https://www.baidu.com/“);将会正确的替换到百度的首页面;)

  了解完location对象的基本方法和属性后,再来学习下location对象常用的一个功能的封装:即获取URL地址的参数转换成对象的形式。常见的有两种方法,用正则表达式和普通的字符串拼接。推荐用正则,因为URL地址是可以任由用户输入的,

用正则则不会出错,可能谈到正则,很多人就产生了抵触心理,其实对于正则不要我我们理解的很深刻,能读懂一些简单的以及能写一些简单的就够了。这里推荐一篇关于学习正则的文章:http://www.cnblogs.com/virus1102/p/4966789.html

方法1:正则

function getQueryObject(url) {url = url == null ? window.location.href : url;var search = url.substring(url.lastIndexOf("?") + 1); // name=1&dd=dddvar obj = {};var reg = /([^?&=]+)=([^?&=]*)/g;search.replace(reg, function (rs, $1, $2) {// 注意:ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,// 每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来// 的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配// 在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。var name = decodeURIComponent($1);var val = decodeURIComponent($2);               val = String(val);obj[name] = val;return rs;});return obj;
}

方法2:正则

function urlParse(){// let url = window.location.search;  // ?id=12345&a=blet url = "http://www.baidu.com?name=javascript&keyword=word"  let obj = {};// [?&]匹配?或者&的一个字符,[^?&]匹配非?或者&的任意一个字符,+表示前面的匹配项([^?&])为一个或多个,=匹配=let reg = /[?&][^?&]+=[^?&]+/g;  let arr = url.match(reg); //[?id=12345,&a=b]if(arr){arr.forEach((item)=>{let tempArr = item.substring(1).split('='); // [id,12345]let key = decodeURIComponent(tempArr[0]);let val = decodeURIComponent(tempArr[1]);obj[key] = val;})}return obj;
}

方法3:

 function urlParse(url){//  split()方法将字符串用指定的字符分割成数组,返回的是被分隔的数组,但数组中不包含该字符var arr1 = url.split("?");var params = arr1[1].split("&");var obj = {};//声明对象for(var i=0;i<params.length;i++){var param = params[i].split("=");obj[param[0]] = param[1];//为对象赋值
    }return obj;}

  这是我第一次写文章,目的也很简单,就是将自己的平时的学习历程记录下来,同时方便以后的复习,所以很多内容都是网上一搜一大把的,但是自己总结后的体会是不一样的。如果有路过的朋友,希望收藏点赞,最后希望自己在前端这条路越走越远,

转载于:https://www.cnblogs.com/yzq-fighting/p/7552889.html

location对象相关相关推荐

  1. html根据文档定位,html文档中的location对象属性理解及常见的用法

    关于location对象的简单理解: 1.location对象中涵盖了当前页面(本页面)或者更直接的说,是当前加载的这个html文档的url信息 2.location对象作为window对象的一个属性 ...

  2. JS中location对象使用

    location 地址对象 它描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗 ...

  3. html5中的图片的location,HTML5中的History和Location对象

    今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...

  4. 用Location对象和history对象修改页面url

    用Location对象和history对象修改页面url 1.通过hash属性更改url Location 对象包含有关当前 URL 的信息 Location.hash是URL的锚部分 Locatio ...

  5. JavaScript之BOM对象(JS函数作用域、window、history、location对象)

    文章目录 一.JS作用域 二.window窗口 三.history对象 四.location对象 本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...

  6. JavaScript学习(六)—location对象常用的属性和方法

    JavaScript学习(六)-location对象常用的属性和方法 一.location对象 作用:location是window对象的一个属性,本身也是对象类型,它的作用是用来获取文档对象的相关信 ...

  7. javascript:Location对象的使用简介

    location对象: location提供了关于当前打开窗口或者特定框架的url信息.一个多框架的窗口对象在location属性显示的是父窗口的URL,每个框架也有一个与之相伴的location对象 ...

  8. 认识Javascript中的Location对象(一)

    Location对象包含了当前页面与位置(url)相关的信息 URL示例:http://www.baidu.com:80/news/index.aspx?id=1&name=location# ...

  9. JavaScript 中 Location 对象介绍

    目录 Location 对象 Location 对象属性 Location 对象方法 Location 对象方法 细解 1 window.loction.href 语法: 说明: 举例: 2  win ...

最新文章

  1. Linux (CentOS)安装VNC+XFCE可视化桌面环境 附安装FireFox浏览器
  2. Spring事务异常回滚,try catch 捕获异常不回滚
  3. intellij idea不显示git push按钮的解决办法
  4. Redis数据结构之字符串
  5. wave文件 fft_STM32F103 如何实现 FFT?
  6. Centos 7.5安装配置MongoDB 4.0.4
  7. 双向dcdc变换器simulink仿真_台达_OBC双向充电_HighEfficiency HighDensity GaNBased 6.6kW
  8. java获取ip地址不重复,如何在android(Java)中验证Ip地址[重复]
  9. 系统业务逻辑书籍_「樊登读书会强推:免费送10本绝密书」彻底改变你的逻辑思维能力...
  10. scss-字符串连接符
  11. WebSite和Web Application\网站与Web项目的区别
  12. CentOS 配置防火墙操作实例(启、停、开、闭port)
  13. Parser-Free Virtual Try-on via Distilling Appearance Flows代码解析
  14. win11蓝牙无法使用 Windows11蓝牙无法使用的解决方法
  15. errorcode 微信分享_微信公众号网页授权code问题
  16. 01 双重差分与三重差分分析法
  17. android的适配器作用,适配器在Android中的作用是什么?
  18. IT也疯狂:十一长假特别篇
  19. 第五章 向邮件添加附件
  20. 基于深度学习实现行人跟踪相关论文总结

热门文章

  1. 天气预报如何得获得?
  2. 【Java从0到架构师】Redis 进阶 - 持久化(RBD、AOF)、高可用(主从复制、哨兵机制、Cluster)
  3. 【Java从0到架构师】SQL 多表查询
  4. Java代码中换行符怎么用
  5. 移动端报表JS开发示例--获取定位
  6. python三大神器_常用Python代码及花式写法(函数调用自身+三大神器)
  7. linux 批量选中文本删除,教程 | 【七牛云】Qshell Linux下批量删除文件教程
  8. java string date_Java基础教程:Java之Object类,Objects类,Date类概念及使用!
  9. php mysql 源码 安装教程_源码安装和配置apache(httpd)和 PHP 和 mysql全过程(一)...
  10. python杨辉三角_python中的部分高级特性