location对象相关
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); (重新加载当前文档)
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对象相关相关推荐
- html根据文档定位,html文档中的location对象属性理解及常见的用法
关于location对象的简单理解: 1.location对象中涵盖了当前页面(本页面)或者更直接的说,是当前加载的这个html文档的url信息 2.location对象作为window对象的一个属性 ...
- JS中location对象使用
location 地址对象 它描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗 ...
- html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
- 用Location对象和history对象修改页面url
用Location对象和history对象修改页面url 1.通过hash属性更改url Location 对象包含有关当前 URL 的信息 Location.hash是URL的锚部分 Locatio ...
- JavaScript之BOM对象(JS函数作用域、window、history、location对象)
文章目录 一.JS作用域 二.window窗口 三.history对象 四.location对象 本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...
- JavaScript学习(六)—location对象常用的属性和方法
JavaScript学习(六)-location对象常用的属性和方法 一.location对象 作用:location是window对象的一个属性,本身也是对象类型,它的作用是用来获取文档对象的相关信 ...
- javascript:Location对象的使用简介
location对象: location提供了关于当前打开窗口或者特定框架的url信息.一个多框架的窗口对象在location属性显示的是父窗口的URL,每个框架也有一个与之相伴的location对象 ...
- 认识Javascript中的Location对象(一)
Location对象包含了当前页面与位置(url)相关的信息 URL示例:http://www.baidu.com:80/news/index.aspx?id=1&name=location# ...
- JavaScript 中 Location 对象介绍
目录 Location 对象 Location 对象属性 Location 对象方法 Location 对象方法 细解 1 window.loction.href 语法: 说明: 举例: 2 win ...
最新文章
- Linux (CentOS)安装VNC+XFCE可视化桌面环境 附安装FireFox浏览器
- Spring事务异常回滚,try catch 捕获异常不回滚
- intellij idea不显示git push按钮的解决办法
- Redis数据结构之字符串
- wave文件 fft_STM32F103 如何实现 FFT?
- Centos 7.5安装配置MongoDB 4.0.4
- 双向dcdc变换器simulink仿真_台达_OBC双向充电_HighEfficiency HighDensity GaNBased 6.6kW
- java获取ip地址不重复,如何在android(Java)中验证Ip地址[重复]
- 系统业务逻辑书籍_「樊登读书会强推:免费送10本绝密书」彻底改变你的逻辑思维能力...
- scss-字符串连接符
- WebSite和Web Application\网站与Web项目的区别
- CentOS 配置防火墙操作实例(启、停、开、闭port)
- Parser-Free Virtual Try-on via Distilling Appearance Flows代码解析
- win11蓝牙无法使用 Windows11蓝牙无法使用的解决方法
- errorcode 微信分享_微信公众号网页授权code问题
- 01 双重差分与三重差分分析法
- android的适配器作用,适配器在Android中的作用是什么?
- IT也疯狂:十一长假特别篇
- 第五章 向邮件添加附件
- 基于深度学习实现行人跟踪相关论文总结
热门文章
- 天气预报如何得获得?
- 【Java从0到架构师】Redis 进阶 - 持久化(RBD、AOF)、高可用(主从复制、哨兵机制、Cluster)
- 【Java从0到架构师】SQL 多表查询
- Java代码中换行符怎么用
- 移动端报表JS开发示例--获取定位
- python三大神器_常用Python代码及花式写法(函数调用自身+三大神器)
- linux 批量选中文本删除,教程 | 【七牛云】Qshell Linux下批量删除文件教程
- java string date_Java基础教程:Java之Object类,Objects类,Date类概念及使用!
- php mysql 源码 安装教程_源码安装和配置apache(httpd)和 PHP 和 mysql全过程(一)...
- python杨辉三角_python中的部分高级特性