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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
深入理解js promise chain
May 05 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
什么是短波收听SWL
2021/03/01 无线电
php的控制语句
2006/10/09 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php实现小程序支付完整版
2018/10/09 PHP
php创建类并调用的实例方法
2019/09/25 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中random模块用法实例分析
2015/05/19 Python
星球大战与Python之间的那些事
2016/01/07 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
小学数学课后反思
2014/04/23 职场文书
励志演讲稿大全
2014/08/21 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
数学复习课教学反思
2016/02/18 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android