JavaScript window.location对象


Posted in Javascript onNovember 14, 2014

经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询。

示例
URL:http://b.a.com:88/index.php?name=kang&when=2011#first

属性 含义
protocol: 协议 "http:"
hostname: 服务器的名字 "b.a.com"
port: 端口 "88"
pathname: URL中主机名后的部分 "/index.php"
search: "?"后的部分,又称为查询字符串 "?name=kang&when=2011"
hash: 返回"#"之后的内容 "#first"
host: 等于hostname + port "b.a.com:88"
href: 当前页面的完整URL "http://www.a.com:88/index.php?name=kang&when=2011#first"

window.location和document.location互相等价的,可以交换使用

location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载

注意
URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first

search: "?name=kang&how=" 第一个"?"之后
hash: "#when=2011#first" 第一个"#"之后的内容
search:"?name=kang&how="第一个"?"之后
hash:"#when=2011#first"第一个"#"之后的内容

方法

location.assign( url )
location.assign('http://www.baidu.com'); 等同于 window.location = 'http://www.baidu.com'
这种方式会讲新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。
location.replace( url )
与assign方法一样,但会从浏览器历史栈中删除本页面,也就是说跳转到新页面后“后退按钮”不能回到该页面。目前IE、Chrome只是简单的跳转,只有Firefox会删除本页面的历史记录。
location.reload( force )
重新载入当前页面。force为true时从服务器端重载;false则从浏览器缓存中重载,默认值false。

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
给Function做的OOP扩展
May 07 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
Vue生命周期示例详解
Apr 12 Javascript
详解Angular 4.x Injector
May 04 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
js与C#进行时间戳转换
Nov 14 #Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 #Javascript
使用node.js 制作网站前台后台
Nov 13 #Javascript
JavaScript 作用域链解析
Nov 13 #Javascript
jQuery $命名冲突解决方案汇总
Nov 13 #Javascript
You might like
yii2中使用Active Record模式的方法
2016/01/09 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python发送email的3种方法
2015/04/28 Python
对numpy中shape的深入理解
2018/06/15 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python实现弹窗祝福效果
2019/04/07 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
numpy库reshape用法详解
2020/04/19 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
电大自我鉴定
2013/10/27 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers