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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 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
php设计模式 State (状态模式)
2011/06/26 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
vue项目中引入Sass实例方法
2019/08/27 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python闭包和装饰器用法实例详解
2019/05/22 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
宣传活动总结范文
2014/07/01 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
借名购房协议书范本
2014/10/06 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年电工工作总结
2014/11/20 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书