html文档中的location对象属性理解及常见的用法


Posted in Javascript onAugust 13, 2014

关于location对象的简单理解:

1.location对象中涵盖了当前页面(本页面)或者更直接的说,是当前加载的这个html文档的url信息

2.location对象作为window对象的一个属性,可以通过window.location老访问

下面顺便介绍一些URL(资源定位符)的相关信息吧:

在浏览器中URL通常由下面几个部分组成的:

[协议][host][path][query]

协议:常见的协议有:

http:// 表示资源文件在web服务器上

ftp://表示资源文件在网络上的ftp服务器中

host:主机名以及端口号,例如本机tomcat常用的host:localhost:8080

path:项目的路径信息,一般是由“/”以及字符组成的,"/"为上下级关系

query:一般是以“?”开头的,后面加上一些歌键值对(key=value)的形势,多个键值对时用“&”隔开,可用于动态网页,传参数至服务器端,用于后台有关操作,查询数据库条件等等,提交表格数据等等,都可以放在这里提交,涉及安全性的东西需要另外搞定加密或者通过其他方式。。。。

query的后面还可以添加以“#”号开头的参数,但是目前没用到这个东西,暂时不随便发表言论

location对象属性:

1.href属性:当前页面的完整url信息,包括协议,主机名,端口号,查询参数,#信息等等等,完整的都包含了

2.host属性:主机名称和端口号,比如localhost:8080本机

3.hostname:主机名

4.port:url中的端口号

5.pathname:url中的路径内容包含“/”的那部分内容

6.protocol:协议

7.serach:以“?”开始的query部分内容

8.hash:以“#”开始的内容

location常见的用法

很显然,除了可以给开发者提供便捷的属性信息以外,还有一个更加重要和常用的用途

重新加载页面,可以用来刷新文档内容,但是更加重要的用途是,修改href信息之后,重新加载文档内容

location.href:在赋值之后,浏览器会根据这个指定的全新的url,刷新文档的内容

location.reload():重新加载文档

协助我们解决页面跨域的问题:

1.刷新当前的页面

window.location.href =url//我习惯使用这个方法

self.location.href =url

location.href =url

上述三个方法都可用来刷新当前页面(根据指定的url重新加载,可以是另一个全新的文档,替换当前文档)

2.父页面中使用iframe包含了子页面时

父页面刷新子页面:

window.frames["id"].location.reload()//id为页面中iframe的id

3.子页面刷新父页面

parant.location.reload()

self.opener.location.reload()

方法有很多,随着以后的实际使用继续总结!!!!

其他常见方法:

location.replace() //使用新文档替换当前文档

location.assign() //加载新文档

Javascript 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
js中string转int把String类型转化成int类型
Aug 13 #Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 #Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 #Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 #Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 #Javascript
用javascript读取xml文件读取节点数据
Aug 12 #Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 #Javascript
You might like
PHP session有效期问题
2009/04/26 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python中动态创建类实例的方法
2017/03/24 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Django框架 信号调度原理解析
2019/09/04 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
面向对象编程OOP的优点
2013/01/22 面试题
请介绍一下Ant
2016/07/22 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
英语生日邀请函
2014/01/23 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python