博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
location对象相关
阅读量:4944 次
发布时间:2019-06-11

本文共 2914 字,大约阅读时间需要 9 分钟。

  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

 

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

 

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

你可能感兴趣的文章
从PowerDesigner概念设计模型(CDM)中的3种实体关系说起
查看>>
VMware Workstation 不可恢复错误: (vcpu-0)
查看>>
frontEnd(前端基础)
查看>>
2016 提高组c++ 错题
查看>>
网站通信协议升级到HTTPS&HTTP2
查看>>
猴子吃桃问题
查看>>
使用Win7+IIS7发布网站或服务步骤
查看>>
MVC公司架构介绍-框架分层
查看>>
python外部调用程序
查看>>
《JavaScript高级程序设计》读书笔记(三)基本概念第三小节 String、Object类型...
查看>>
Hyper-v 中 CentOS 连接外网之有线网卡
查看>>
JS字符串与汉字的字节获取
查看>>
函数的渐近增长表3
查看>>
DLL技术应用04 - 零基础入门学习Delphi47
查看>>
鱼C记事本V1.0 - 零基础入门学习Delphi27
查看>>
链接和作用域2 - C++快速入门43
查看>>
java中原子操作的实现分析
查看>>
Django------filter查询的使用
查看>>
织梦DedeCms网站更换域名后文章图片路径批量修改
查看>>
webkit内核浏览器的CSS写法
查看>>