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 italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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 fread()使用技巧
2010/01/22 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
python中的格式化输出用法总结
2016/07/28 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
pandas中的series数据类型详解
2019/07/06 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
房产代理公证处委托书
2014/04/04 职场文书
服务行业口号
2014/06/11 职场文书
英文感谢信格式
2015/01/21 职场文书
三八节祝酒词
2015/08/11 职场文书
创业计划书之寿司
2019/07/19 职场文书
解析Java中的static关键字
2021/06/14 Java/Android