html文档中的location对象属性理解及常见的用法

 更新时间:2014年08月13日 17:13:56   投稿:whsnow  
location对象中涵盖了当前页面(本页面)或者更直接的说是当前加载的这个html文档的url信息,可以通过window.location老访问

关于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之Date对象详解

    Javascript之Date对象详解

    本文主要介绍javascript中的Date对象的用法,讲解的很详细,希望能给大家做一个参考。
    2016-06-06
  • nodejs中exports与module.exports的区别详细介绍

    nodejs中exports与module.exports的区别详细介绍

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块接下来介绍创建过程,感兴趣的朋友可以参考下
    2013-01-01
  • javascript数组里的27个方法总合详解

    javascript数组里的27个方法总合详解

    这篇文章主要为大家详细介绍了javascript数组里的方法27个总合,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

    10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

    这篇文章主要介绍了10分钟彻底搞懂Http的强制缓存和协商缓存(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • ECMAScript6快速入手攻略

    ECMAScript6快速入手攻略

    本文译自 Github 上的一篇文章,目的是对还不太熟悉 ES6语法的同学做一个简单的扫盲。下面一起来学习。
    2016-07-07
  • 详解JavaScript闭包问题

    详解JavaScript闭包问题

    这篇文章主要介绍了详解JavaScript闭包问题,通过案例一步步进行讲解了该项技术问题,讲述了变量的作用域,闭包的概念和作用,需要的朋友可以参考下
    2021-06-06
  • Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式

    Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式

    function 是 Javascript 中的第一类对象,这就意味着函数可以像其他值一样被传递。一个最常见的用法就是将一个匿名函数作为回调函数传递到另外一个异步函数中。
    2014-06-06
  • JavaScript中使用concat()方法拼接字符串的教程

    JavaScript中使用concat()方法拼接字符串的教程

    这篇文章主要介绍了JavaScript中使用concat()方法拼接字符串的教程,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • js null,undefined,字符串小结

    js null,undefined,字符串小结

    还一个要注意的就是null虽然是Object型 但是它非常特殊,本身存放在stack栈中。你可以理解成它是Object的一种特殊形式
    2010-08-08
  • PHP守护进程实例

    PHP守护进程实例

    这篇文章主要介绍了PHP守护进程实例,php也是可以直接进行守护进程的启动与终止的,相对于shell来说会简单很多,需要的朋友可以参考下
    2015-03-03

最新评论