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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
jQuery常用选择器详解
Jul 17 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
关于ES6尾调用优化的使用
Sep 11 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定时计划任务的实现方法详解
2013/06/06 PHP
Yii配置文件用法详解
2014/12/04 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
javascript时间函数大全
2014/06/30 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
python抽象基类用法实例分析
2015/06/04 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python分布式编程实现过程解析
2019/11/08 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
普天C++笔试题
2016/03/20 面试题
施工安全责任书
2014/04/14 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
旷课检讨书500字
2014/10/14 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
写给领导的感谢信
2015/01/22 职场文书
Python 中random 库的详细使用
2021/06/03 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android