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 firefox兼容ie的dom方法脚本
May 18 Javascript
js 操作select相关方法函数
Dec 06 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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自定义函数返回多个值
2006/11/26 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
用console.table()调试javascript
2014/09/04 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
分析经典Python开发工程师面试题
2019/04/08 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
毕业生自荐信
2013/12/14 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
项目合作协议书
2014/04/16 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年国培研修感言
2015/08/01 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技