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.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
使用Mock.js生成前端测试数据
Dec 13 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP中for循环语句的几种变型
2007/03/16 PHP
php session 错误
2009/05/21 PHP
PHP学习之整理字符串
2011/04/17 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python批量解压zip文件的方法
2019/08/20 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
详解python statistics模块及函数用法
2019/10/27 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
开展批评与自我批评发言材料
2014/10/17 职场文书
邀请书模板
2015/02/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python