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 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Javascript 构造函数详解
Oct 22 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
react-native android状态栏的实现
Jun 15 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python字符串的拼接方法总结
2019/11/18 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
python 利用zmail库发送邮件
2020/09/11 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
演讲主持词
2014/03/18 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
教师一帮一活动总结
2014/07/08 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
招商引资工作汇报
2014/10/28 职场文书
入学证明
2015/06/23 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
详解Django的MVT设计模式
2021/04/29 Python