JS中Location使用详解


Posted in Javascript onMay 12, 2015

javascript中location地址对象描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址,只需要使用“location”就行了;若要表示某一个窗口的地址,就使用“<窗口对象>.location”。

一、JS中Location的含义

1、Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

2、Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

3、除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

4、除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace()可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

二、JS中Location属性

属性 描述
hash 设置或返回从井号 (#) 开始的 URL(锚)。如果地址里没有“#”,则返回空字符串。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号,设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议,取值为 'http:','https:','file:' 等等。
search 设置或返回从问号 (?) 开始的 URL(查询部分)。

三、JS中Location对象方法

属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档,相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 用新的文档替换当前文档,相当于按浏览器上的“刷新”(IE)或“Reload”键。

四、JS中Location实例

//简单跳转

function gotoPage(url) { 

var url ="url?catalogid="+catalogID; 

window.location =url; 

}

//为单个页面传递参数

function goto_catalog(iCat) { 

if(iCat<=0) { 

top.location = "url";

} else { 

window.location ="url?catid="+iCat; 

}

}

// 对指定框架进行跳转页面

function goto_iframe(url) { 

parent.mainFrame.location ="url"; 

}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
js数组常用最重要的方法
Feb 04 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
js获取微信版本号的方法
May 12 #Javascript
javascript中基本类型和引用类型的区别分析
May 12 #Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 #Javascript
Javascript中typeof 用法小结
May 12 #Javascript
js/jquery判断浏览器类型的方法小结
May 12 #Javascript
js实现div层缓慢收缩与展开的方法
May 11 #Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 #Javascript
You might like
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
Vue程序调试的方法
2019/06/17 Javascript
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
python中os包的用法
2020/06/01 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
python wsgiref源码解析
2021/02/06 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
保安员岗位职责
2013/11/17 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
先进员工获奖感言
2014/08/14 职场文书
师德师风整改措施
2014/10/24 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL