javascript之BOM对象(二location对象)
一、location对象提供和当前加载的文档相关的信息还有一些导航功能。location对象是window对象的属性,同时也是document对象的属性。window.location和document.location指向同一个对象。
location对象不仅保存着当前文档的信息,还可以将URL解析为独立的字段,可以通过不同的属性访问这些片段。
location的所有属性如下
属性名 | 例子 | 说明 |
hash | #contents | 返回URL中的hash(#号后跟0个或多个字符) |
host | localhost:8080 | 返回服务器名称和端口号 |
hostname | localhost | 返回服务器名称 |
href | http://www.baidu.com | 返回当前加载页面的完整URL |
pathname | /TyspV4D/ | 返回当前URL的目录 |
port | 8080 | 返回URL中指定的端口号 |
protocol | http | 返回URL中使用的协议 |
search | ?q=javascript | 返回URL中的查询字符串 |
1、查询字符串参数
location.search()可以返回从?到URL末尾的所有字符串,但没有办法逐个访问其中查询字符串的参数。为此可以创建下面的函数:
function queryStringParam()
{
var qs=(location.search.length>0?location.search.substring(1):"");
args={};
items=qs.length?qs.spilt("&"):[];//spilt函数是将字符串用特定的符号分开,返回一个数组,这儿返回的是字符串数组
item=null;
name=null;
value=null;
i=0;
while(i<items.length)
{
item=items[i].spilt("=");//在这儿是用“=”将字符串的键和值分离
name=decodeURLComponent(item[0]);//解码
value=decodeURLComponent(item[1]);
if(name.length)
{
args[name]=value;
}
}
return args; }
- 先用substring函数去掉“?”
- 用spilt(“&”)将字符串分离为键值对
- 用spilt(“=”)分离键值
- 最后取出键和值
2、网址操作
location可以使用很多方式改变浏览器打开的网址,即改变打开的URL值。
首先,最常用的方法时用location调用assgin函数并为其传递一个URL参数。
location.assign("http://www.baidu.com");
使用上面的方法会在历史记录生成一条记录。如果是以window.location=”http://www.baidu.com”和location.href=”http://www.baidu.com”也会调用assgin方法。
location.href是最常用的方法。
修改location对象的其他属性也可以改变当前页的URL。
除了修改hash属性外修改其他属性页面都会重新加载
通过上面这些方式修改URL之后都会在历史记录中生成一条新纪录,这样也就可以通过返回键返回上一页面。那么要是不想使用返回键,就可以使用replace方法,该方法只接受一个URL参数,然后转到该URL页面
setTimeout(function(){
location.replace("http://www.google.com");
},5000);
在上面的代码中,5s之后就会转到google主页,并且不能返回到原来页面,历史记录中也没有生成上一页面。
reload函数如果不接受参数,则是以最节省资源的方式重新加载页面,这样就有可能从浏览器缓存中加载
如果要强制从服务器加载的话就要传递参数true。
reload()//从浏览器加载
reload(true)//从服务器加载
javascript之BOM对象(二location对象)的更多相关文章
- 第8章 浏览器对象模型BOM 8.2 location对象
location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性, ...
- BOM元素之location对象
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,它既是window对象的属性,也是document对象的属性:换句话说,window.location和documen ...
- JavaScript -- 时光流逝(十):Screen 对象、History 对象、Location 对象
JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...
- 8.5 JavaScript的BOM(二)
8.5 JavaScript的BOM 即 浏览器对象模型(Browser Object Model) 浏览器对象包括 一.Window(窗口) 如果需要打开一个新的网站,应该通过超级链接等方式让用户主 ...
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...
- BOM 3.1 location对象 | history对象 | navigator对象 | 定时器 | 三大系列
JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM---& ...
- 【2017-03-28】JS基础、windows对象、history对象、location对象
一.JS基础 JS - javaScript 1.js功能: 1).进行数据的运算.2).控制浏览器的一些功能.3).控制元素(属性.内容.样式) js引用位置: 可以放在html页的任意位置. 推荐 ...
- History对象和location对象
history对象 History对象包含用户在浏览器窗口中访问过的url.不是所有浏览器都支持该对象. 属性length 返回浏览器历史列表中的URL数量. 方法:back() 加载histor ...
随机推荐
- leetcode138. 复制带随机指针的链表
思路一:哈希 借助哈希保存节点信息. 代码 时间复杂度:O(n)空间复杂度:O(n) class Solution{ public: Node* copyRandomList(Node* head) ...
- .NET三种异步模式(APM、EAP、TAP)
APM模式: .net 1.0时期就提出的一种异步模式,并且基于IAsyncResult接口实现BeginXXX和EndXXX类似的方法. .net中有很多类实现了该模式(比如HttpWebReque ...
- flutter环境配置window10
第一步,配置git环境,这个作为前端的都是会的,如果你不会,去问度娘去 第二步,配置java的开发环境,这里建议下载jdk为1.8版本的,我最初使用的是如下图的jdk版本,后面和flutter版本不一 ...
- tornado请求与响应
tornado中处理请求与响应的类如下, 所有视图类必须继承该类: tornado.web.RequestHandler 一. 响应之self.write()方法 1. 该方法可返回值的类型: 当返 ...
- python中使用redis模块, 设置过期时间
# 链接数据库self.handle = redis.Redis(host=host, port=port, db=db, password=password, decode_responses=Tr ...
- vue项目中npm安装sass,less,stylus
用vue-cli脚手架搭建出来的,默认是用标准css的.如果你想用sass,less,stylus就需要自己手动安装一下了. 进入项目文件夹,然后安装(这里以stylus为例)stylus和stylu ...
- ZROI 暑期高端峰会2019 总结
FBI Warning:以下博客含有 FBI Warning 的都是包含大量人类本质之一的. 前几天听课: Day1 组合计数 Day1 序列数据结构 Day2 线性代数 Day3 图论 Day3 字 ...
- zlib: 不同语言,比如go, php, python 压缩的结果可能不同
1.这个是实际工作中发现的问题,一边用了go语言对一个文件进行了zlib压缩,然后我用 php 写了个脚本对同一个文件进行zlib压缩,但是生成的两个文件不同,当时一直以为是压缩参数选择错了,后来经过 ...
- Elasticsearch由浅入深(六)批量操作:mget批量查询、bulk批量增删改、路由原理、增删改内部原理、document查询内部原理、bulk api的奇特json格式
mget批量查询 批量查询的好处就是一条一条的查询,比如说要查询100条数据,那么就要发送100次网络请求,这个开销还是很大的如果进行批量查询的话,查询100条数据,就只要发送1次网络请求,网络请求的 ...
- 花一天时间踩了node npm的一个坑
在一个后端眼里nodejs这工具真的难用,最近为了用elementui,然后去硬着头皮学vue,学着学着,发现还要去用node,webpack.真想掐死前端那一群人啊.... 好了,进入正题.话说我装 ...