Location 对象

2021/7/14 6:08:19

本文主要是介绍Location 对象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

window.document.getElementById("header") === document.getElementById("header");
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() -移动当前窗口
  • window.resizeTo() -重新调整当前窗口

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

使用 location 对象,结合字符串方法可以抽取 URL 中查询字符串的参数值。

示例

下面定义了一个获取 URL 查询字符串参数值的通用函数,该函数能够抽取每个参数和参数值,并以名/值对的形式存储在对象中返回。


  1. var queryString = function () { //获取URL查询字符串参数值的通用函数
  2. var q = location.search.substring (1); //获取查询字符串,如“id=123&name=location”
  3. var a = q.split ("&"); //以&符号为界把查询字符串劈开为数组
  4. var o = {}; //定义一个临时对象
  5. for (var i = 0; i < a.length; i ++) { //遍历数组
  6. var n = a[i].indexOf ("="); //获取每个参数中的等号下标位置
  7. if (n == -1) continue; //如果没有发现则跳到下一次循环继续操作
  8. var v1 = a[i].substring (0, n); //截取等号前的参数名称
  9. var v2 = a[i].substring (n + 1); //截取等号后的参数值
  10. o[v1] = unescape (v2); //以名/值对的形式存储在对象中
  11. }
  12. return o; //返回对象
  13. }

然后调用该函数,即可获取 URL 中的查询字符串信息,并以对象形式读取它们的值。


  1. var f1 = queryString (); //调用查询字符串函数
  2. for (var i in f1) { //遍历返回对象,获取每个参数及其值
  3. console.log(i + "=" + f1[i]);
  4. }

如果当前页面的 URL 中没有查询字符串信息,用户可以在浏览器的地址栏中补加完整的查询字符串,如“?id=123&name=location”,再次刷新页面,即可显示查询的字符串信息。

location 对象的属性都是可读可写的。例如,如果把一个含有 URL 的字符串赋给 location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。


  1. location = "http://c.biancheng.net/dede/"; //页面会自动跳转到对应的页面
  2. location.href = "http://c.biancheng.net/"; //页面会自动跳转到对应的页面

如果改变 location.hash 属性值,则页面会跳转到新的锚点(<a name="anchor"> 或 <element id="anchor">),但不会重载。


  1. location.hash = "#top";

除了设置 location 对象的 href 属性外,还可以修改部分 URL 信息,用户只需要给 location 对象的其他属性赋值即可。这时会创建一个新的 URL,浏览器会将它装载并显示出来。

如果需要 URL 其他信息,只能通过字符串处理方法截取。例如,如果要获取网页的名称,可以这样设计。


  1. var p = location.pathname;
  2. var n = p.substring (p.lastIndexOf ("/") + 1);

如果要获取文件扩展名,可以这样设计。


  1. var c = p.substring (p.lastIndexOf (".") + 1);

location 对象还定义了两个方法:reload() 和 replace()。

  • reload():可以重新装载当前文档。
  • replace():可以装载一个新文档而无须为它创建一个新的历史记录。也就是说,在浏览器的历史列表中,新文档将替换当前文档。这样在浏览器中就不能通过单击“返回”按钮返回当前的文档。

对那些使用了框架并且显示多个临时页的网站来说,replace() 方法比较有用。这样临时页面都不被存储在历史列表中。

window.location 与 document.location 不同,前者引用 location 对象,后者只是一个只读字符串,与 document.URL 同义。但是,当存在服务器重定向时,document.location 包含的是已经装载的 URL,而 location.href 包含的则是原始请求文档的 URL。



这篇关于Location 对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程