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 中的日期和时间及表示标准介绍
Aug 21 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
js canvas实现擦除效果示例代码
Apr 26 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
js实现二级联动简单实例
Jan 11 Javascript
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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
RC4文件加密的python实现方法
2015/06/30 Python
八大排序算法的Python实现
2021/01/28 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python实现学生管理系统
2018/01/11 Python
详解python中的线程
2018/02/10 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python转换时间的图文方法
2019/07/01 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL