芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
8

你真的认识 window.location 吗?

作者 芒果/分类 代码/发布于 2011-04-29 11:52

如果你稍微懂一些 JS 代码,一般都会知道 window.location.href 这个属性。并且用该属性获取页面 URL 地址:

window.location.href = window.location.href;

好吧,我告诉你,这样弱掉了。其实原生 JavaScript 真是什么都有。

window.location 对象所包含的属性

属性 描述
hash 从井号 (#) 开始的 URL(锚)
host 主机名和当前 URL 的端口号
hostname 当前 URL 的主机名
href 完整的 URL
pathname 当前 URL 的路径部分
port 当前 URL 的端口号
protocol 当前 URL 的协议
search 从问号 (?) 开始的 URL(查询部分)

以芒果小站为例,用 window.location.href 获得某个页面参数,得到如下结果:

window.location.hash

要使用 JS 定位锚点,完全可以使用 window.hash 配合元素 ID 完成。比如快速定位到页面的某条评论,则直接使用如下代码即可:

window.location.hash = "#comment-5981";

另外 Twitter、Facebook、Google 等已经开始大量使用 #! 这种形式的 hash 方法处理异步交互页面的 URL 可回溯功能。

window.location.search

如果有这样一个 URL 地址:

http://www.google.com.hk/search?hl=zh-CN&source=hp&biw=1400&bih=935&q=%E8%8A%92%E6%9E%9C%E5%B0%8F%E7%AB%99&aq=f&aqi=&aql=&oq=

如何利用 JS 脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。

另外,如果根据用户的搜索条件刷新页面,只需直接设置 window.location.search 即可。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/do-you-really-know-window-location/" title="你真的认识 window.location 吗?" rel="bookmark">你真的认识 window.location 吗? | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 8 条群众意见

  1. 熊胆粉 /2011-04-30 11:55

    值得学习 谢谢分享 回应

    #1
  2. 图说 /2011-05-02 10:02

    看不懂!!! 回应

    #2
  3. 星巴雅 /2011-05-03 16:37

    不知道 回应

    #3
  4. ?
    你真的认识 window.location 吗? | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-05-03 23:06

    […] 转载至:你真的认识 window.location 吗? | 芒果小站 分类: css, 其它 标签: 临时 5 个简单实用的 CSS 属性纯 CSS 实现文本渐变效果CSS 的外联,内联和嵌入芒果教你清除浮动CSS 有序列表 ol 和无序列表 ul用 JavaScript 实现 HTML 代码运行框使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进YUI 2: Event Utility多层元素嵌套的圆角按钮 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #4
  5. 莲花 /2011-05-16 23:01

    不懂呢。呵呵 回应

    #5
  6. ?
    你真的认识 window.location 吗? | 千里走单骑 /2011-05-21 13:33

    […] jQuery 操作 DOM:10+ 有用的代码片段 (5) © 2010 芒果 版权所有 | 固定链接 | 5 条评论 | 标签 JavaScript, window.location View full post on […] 回应

    #6
  7. ?
    JavaScript for…in 循环的陷阱 | 千里走单骑 /2011-05-21 15:37

    […] 你真的认识 window.location 吗? (5) […] 回应

    #7
  8. ?
    快点,把锚点干掉! | 千里走单骑 /2011-06-23 21:37

    […] 你真的认识 window.location 吗? (7) […] 回应

    #8

下面我简单说几句