JS是由DOM(文档对象模型)、BOM(浏览器对象模型)、以及ECMA组成,而location对象是BOM中的一个非常重要的对象,所有关于地址栏信息的内容都在这里。了解location对象之前让我们先来了解下URL地址的组成。““; 以此为例,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地址是可以任由用户输入的,
用正则则不会出错,可能谈到正则,很多人就产生了抵触心理,其实对于正则不要我我们理解的很深刻,能读懂一些简单的以及能写一些简单的就够了。这里推荐一篇关于学习正则的文章:
方法1:正则
function getQueryObject(url) { url = url == null ? window.location.href : url; var search = url.substring(url.lastIndexOf("?") + 1); // name=1&dd=ddd var 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=b let 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
这是我第一次写文章,目的也很简单,就是将自己的平时的学习历程记录下来,同时方便以后的复习,所以很多内容都是网上一搜一大把的,但是自己总结后的体会是不一样的。如果有路过的朋友,希望收藏点赞,最后希望自己在前端这条路越走越远,