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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
angular学习之动态创建表单的方法
Dec 07 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中OR与|| AND与&&的区别总结
2013/10/26 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js调用css属性写法
2013/09/21 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python中and和or如何使用
2020/05/28 Python
python实现批量命名照片
2020/06/18 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
js实现弹框效果
2021/03/24 Javascript
vue路由实现登录拦截
2021/03/24 Vue.js
《纸船和风筝》教学反思
2014/02/15 职场文书
家长会标语
2014/06/24 职场文书
司考复习计划
2015/01/19 职场文书
2015公司年度工作总结
2015/05/14 职场文书