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 选择器、DOM操作、事件、动画
Nov 25 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
d3.js实现立体柱图的方法详解
Apr 28 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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
mysql 全文搜索 技巧
2007/04/27 PHP
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
DOM精简教程
2006/10/03 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python从零开始创建区块链
2018/03/06 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python异常处理机制结构实例解析
2020/07/23 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
顶撞老师检讨书
2014/02/07 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
社区服务活动感想
2015/08/11 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript