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=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<params.length;i++){
var param = params[i].split("=");
obj[param[0]] = param[1];//为对象赋值
}
return obj;
}

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

location对象相关的更多相关文章

  1. js location对象相关命令

    Location.href 返回整个当前url,若对其赋值:location.href="http://www.sina.com.cn"则跳转其urllocation.host 返 ...

  2. location对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JavaScript高级程序设计之location对象

    location对象用来处理URL的相关信息 1.获取查询字符串 // 获取查询字符串对象 var getQueryStringArgs = function () { ? location.sear ...

  4. javascript : location 对象

    window.location: window的location对象 window.location.href 整个URl字符串(在浏览器中就是完整的地址栏) window.location.prot ...

  5. 通过runtime获取对象相关信息

    通过runtime获取对象相关信息 在这里,本人给大家提供一个runtime关于NSObject的扩展,用来显示各种NSObject中的信息,这有助于你来分析类的组成:) 先准备以下类供测试: Mod ...

  6. JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  7. javascript之BOM对象(二location对象)

    一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和documen ...

  8. js 的Location对象

    Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL. 语法: location.[属性|方法] location对象属性图示: location 对象属性: ha ...

  9. 使用Location对象查询字符串参数

    location是BOM中最有用的对象之一: 1.它提供了与当前窗口中加载的文档有关的信息: 2.他还提供了一些导航功能. location对象的属性有: hash, host, hostname, ...

随机推荐

  1. 查看JAVA占用CPU高的线程日志

    # . 查看主进程占用cpu高 top # java # . 按照线程占用cpu由高到低进行排查: -o THREAD,tid, # USER %CPU PRI SCNT WCHAN USER SYS ...

  2. Java8 Date与LocalDate互转

    Java8 日期时间API,新增了LocalDate.LocalDateTime.LocalTime等线程安全类,接下来要说的是LocalDate与java.util.Date之间的转换. 1.Loc ...

  3. 插入blob字段的简单方法

    1. 按普通方法组织插入语句 ,f2为Blob型字段 insert into table (f1,f2,f3) values ('a',:para,'c') 2.对应每个blob型字段,OracleC ...

  4. day7_python之面向对象item系列(__getitem__,__setitem__,__delitem__)

    class Foo: def __getitem__(self, item): print('=====>get') return self.__dict__[item] def __setit ...

  5. tinyhttpd简介

    一:简介: tinyhttpd是由J. DavidBlackstone在1999年编写的,实现了一个很简单的web服务器.支持GET和POST方法,总代码量也就在500行左右,可以用来学习HTTP协议 ...

  6. ArrayList存储基本类型时的封装类

  7. 微软产品开发文档:包括.net core .net vs等等

    Browse all https://docs.microsoft.com/en-us/learn/browse/?roles=developer&products=xamarin%2Cef- ...

  8. idea各种中文显示乱码解决大全

    本文链接:https://blog.csdn.net/liqimo1799/article/details/81811153中文乱码问题分类: 编码普通中文乱码properties文件中文乱码cons ...

  9. Error: Cannot find module 'webpack/bin/config-yargs' 报错原因, webpack@4.X踩的坑~

    1 .使用webpack@4.32.2时, 当我通过package.json的script去执行webpack-dev-server时, 报以下错误:  Error: Cannot find modu ...

  10. Python--day67--include包含其他的url和反向解析URL

    1,include包含其他的url: 2,反向解析URL: