JS BOM之location对象

最新推荐文章于 2024-07-14 19:48:03 发布
最新推荐文章于 2024-07-14 19:48:03 发布
阅读量306 收藏
点赞数
分类专栏： ĴS 文章标签： JS BOM location
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40512519/article/details/81239606
版权

提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性也是document对象的属性。

属性：

location.href  返回当前加载页面的完整URL   说明：location.href与window.location.href等价

console.log(location.href);//http://localhost:63342/Demo/location.html

location.hash  返回URL中的hash(#号后 跟零或多个字符)，如果不包含则返回空字符串。锚点。

    <style>
        .box1{height: 400px;background: #ccc;}
        .box2{height: 600px;background: #666;}
    </style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部"/>
<script>
    console.log(location.hash);
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        location.hash="#top";
    }

</script>

点击返回顶部的按钮返回浏览器顶部。

location.host:返回服务器名称和端口号

location.hostname:返回不带端口号的服务器名称

location.pathname:返回URL中的目录和（或）文件名。

location.port:返回URL中指定的端口号，如果没有，返回空字符串。

location.protocol:返回页面使用的协议。

location.search:返回URL的查询字符串。这个字符串以问号开头。

位置操作：

改变浏览器位置的方法：location.href属性

location对象其他属性也可改变URL:location.hash  location.search

location.replace(url):重新定向URL。不会再历史记录中生成新记录。

<script>
    setTimeout(function(){
        //会跳转到location.html，并且浏览器会产生记录（按后退键返回原来页面）。如果不想产生记录用replace()
       // location.href='location.html'; // window.location='location.html'
        location.replace('location.html');
      
    },1000)
  
</script>

location.reload()  重新加载当前显示的页面。重新加载页面。

说明：

  1. location.reload()有可能从缓存中加载
  2. location.reload(true)从服务器重新加载

建议将reload代码放在最后一行。因为reload是做刷新的操作

 document.getElementById("reload").onclick=function(){
       // location.reload();//从缓存中刷新
        location.reload(true);//强制从服务器刷新
    }

 

蔡蔡动起来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM location对象详解
流楚丶格念的博客
08-19 3870
文章目录事件详解注册/移除事件的三种方式兼容代码事件的三个阶段事件对象的属性和方法案例阻止事件传播的方式常用的鼠标和键盘事件 事件详解 注册/移除事件的三种方式 var box = document.getElementById('box'); box.onclick = function () { console.log('点击后执行'); }; box.onclick = null; box.addEventListener('click', eventCode, false); box.remo
BOM中的location对象
m0_71345904的博客
07-01 291
页面跳转
location对象
最新发布
mobolove的博客
07-14 285
form action="index.html">//action属性规定当提交表单时，向何处发送表单数据。window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。例：http://www.itcast.cn/index.html?substr('起始的位置'，截取几个字符);location.replace()替换当前页面，因为不记录历史，所以不能后退页面。
BOM的location信息
老愚公的博客
03-13 194
BOM location url参数
039 BOM
Manta__的博客
04-05 154
BOM 　　 - 浏览器对象模型 　　- BOM可以使我们通过JS来操作浏览器 　　- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 　　- BOM对象 　　　　　Window　　- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 　　　　　　Navigator　- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 　　　　　　Location　 - 代表当前浏...
JavaScript之Location对象（BOM）
但愿人长久 千里共婵娟
04-11 280
Location Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。 location方法 assign(URL) 加载新的URL文档。 location.assign("://www.baidu.com"); reload() 重新加载当前文档 window.loca
从零开始学前端 - 25. JS BOM之Location对象详解及实际应用
qq_39506551的博客
08-12 492
从零开始学前端 - 25. JS BOM之Location对象详解及实际应用 一、Location对象的属性 二、Location对象的方法 三、实际应用 Location 对象是 BOM 中相当重要的一个对象，包含了有关当前页面的所有与 URL 有关的内容。window.location 和 document.location 都是 Location 对象的引用。
Javascript之BOM(window对象)详解
10-22
JavaScript中的BOM（Browser Object Model，浏览器对象模型）主要处理与浏览器交互的接口，而其中的`window`对象是BOM的核心，它代表了浏览器的一个实例。`window`对象不仅充当JavaScript访问浏览器窗口的接口，同时...
【温故而知新】JavaScript的BOM之Screen:Location:History对象.md
06-13
### 三、Location对象详解 #### 1. 案例演示 下面展示一个简单的`Location`对象使用示例： ```javascript // 创建Location对象 const location = { lat: 0, lng: 0, name: "", init: function (lat, lng, ...
JS中BOM的Location对象的用法（assign()、reload()、replace()）
Fantasc的博客
08-14 939
Location：地址栏的信息封装在该对象中，直接打印location能够获取到当前页面的地址栏信息（完整路径）。 alert(location);//会得到当前页面的完整路径 将location修改为一个完整的绝对路径或者相对路径，当前页面会自动跳转到修改路径的页面，并生成相应历史记录。 location = "http://www.baidu.com";//绝对路径，跳转到百度首页 location = "js测试.html";//相路径，跳转到js测试.html页面 Location对象中
BOM-location
wuxiao18的博客
10-23 188
location对象是最有用的BOM对象，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。 它特别在它既是window对象的属性也是document对象的属性。 换句话说就是window.location=document.location ...
JS-BOM— —location对象
mocoll的博客
08-20 122
五、location对象 window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。 5.1、URL 统一资源定位符(Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。 语法格式： 5.2、location 对象的属性 重点记住: href 和sear
js--7.bom对象-4.location
村西头的俏寡妇
02-06 206
1      Location 1.1  概念 location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。 该对象中封装了浏览器的地址栏的信息   1.2  属性和方法 href属性：href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面 assign()：所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中
BOM之location要点
cqstart116的专栏
03-02 1068
location属性概览 hash 返回URL中的hash(#号后跟0或多个字符)，如果URL中不包含散列，则返回空字符串 host 返回服务器名称和端口号(如果有) hostname 返回不带端口号的服务器名称 href 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 pathname 返回U
BOM location对象
qq_40937541的博客
02-26 122
location对象的属性 location.href :获取或者设置整个URL location.host：返回主机名（域名） location.port：返回端口号，如果未写，返回空字符串 location.pathname：返回路径 location.search：返回参数 location.hash：返回片段 #后面内容 常见于链接、锚点 ...
BOM location 对象详解
jyn15159的博客
01-25 854
location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。 这个对象独特的地方在于，它既是 window 的属性，也是 document 的属性。也就是说， window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息，也保存着把 URL 解析为离散片段后能够通过属性访问的信息。
javascript之BOM的location对象
XINGKONG_04的博客
01-05 317
location对象 location是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。  location对象是很特别的一个对象，因为它既是 window对象的属性，也是document 对象的属性；换句话说， window.location和 document.location引用的是同一个对象。 location 对象的用处不
深入理解JavaScript BOM：window对象与全局作用域
"JavaScript的BOM（浏览器对象模型）主要关注的是window对象，它是BOM的核心，代表了浏览器的一个实例。window对象在JavaScript中同时充当着全局对象的角色，意味着在全局作用域内定义的所有变量、对象和函数都会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值