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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
小程序实现单选多选功能
Nov 04 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
对numpy中向量式三目运算符详解
2018/10/31 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python中使用while循环的实例
2019/08/05 Python
python实现统计代码行数的小工具
2019/09/19 Python
python基于property()函数定义属性
2020/01/22 Python
Python如何给你的程序做性能测试
2020/07/29 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
捐助倡议书范文
2014/04/15 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL