JS 的 Location 对象

简介: JS 的 Location 对象

location 是 window 对象下的一个属性,因为其返回结果为一个对象,所以我们也将 location 属性称为 location 对象,其作用是获取或设置窗口的 URL(URL 即统一资源定位符,互联网标准资源的地址)


URL 的标准语法格式:



protocol:通信协议(http,dtp 等等)

host:主机,域名(www.baidu.com)

port:端口号

path:路径(表示主机的目录或文件地址)

query:参数(以键值对的形式用&隔开)

fradment:片段(#后面接链接 或 锚点)

一:location 对象属性:

location 对象有以下几个常用属性 ,要重点把握住 href 和 search:window均可省略


window.location.href:获取或设置 整个 URL

window.location.host:返回主机名 / 域名

window.location.port:返回端口号

window.location.pathname:返回路径

window.location.search:返回参数

window.location.hash:返回片段

<小案例:在两个页面间传递数据 >

我们要达到以下效果:在第一个页面中输入数据登录跳转到第二个页面,在第二个页面显示出第一个页面输入的数据


第一个页面:




第二个页面:




我们将第一个页面输入的数据拿到了第二个页面中显示,这就利用了 location 对象的 search 属性,在第二个页面中得到了 URL 中 的参数,这样就可以在第二个页面中拿到第一个页面中的数据了,达到了页面域页面间的数据传输


第一个页面代码:

<body>

   <form action="./2.html">

       <input type="text" name="myname">

       <button>登录</button>

   </form>

</body>

第二个页面代码:

<body>

   <p></p>

   <script>

       var p=document.querySelector('p');

       var name=window.location.search;  //name的值为 '?myname=你输入的内容'

       name1=name.substr(1,name.length);  //name1 为 'myneme=你输入的内容' 去掉了?

       var arr=name1.split('=');  //将字符串转为了数组 ['myname', 'mike']

       p.innerHTML= arr[1] + ' 欢迎你登录';

   </script>

</body>

二:location 对象的方法:

location 对象也有几个常用的方法需要了解


window.location.assign():和href属性一样,用于跳转页面,也称为 页面重定向,可以后退

window.location.replace():替换当前页面,无法后退

window.location.reload():重新加载页面,与刷新效果相同,参数为 true 为强制刷新

window. location.assign():

和 href 属性的效果一样,用于跳转页面,也称为 页面重定向,可以后退


<button>按钮</button>

   <script>

       var btn=document.querySelector('button');

       btn.addEventListener('click',function(){

           window.location.assign('https://www.baidu.com/?tn=44004473_21_oem_dg')

       })

   </script>

window. location.replace():

替换当前页面,无法后退


<button>按钮</button>

   <script>

       var btn=document.querySelector('button');

       btn.addEventListener('click',function(){

           window.location.replace('https://www.baidu.com/?tn=44004473_21_oem_dg')

       })

   </script>

注意其跳转后无法回退到上一个页面




window. location.reload():

重新加载页面,和刷新页面效果相同,如果参数为 true 则为强制刷新


<button>按钮</button>

   <script>

       var btn=document.querySelector('button');

       btn.addEventListener('click',function(){

           window.location.reload();

       })


相关文章
|
14天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
24天前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
28天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
9天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
17 1
JavaScript基础知识-枚举对象中的属性
|
9天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
22 2
|
9天前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
19 0
JavaScript基础知识-对象字面量
|
10天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
11 1
|
24天前
|
JSON JavaScript 前端开发
如何检查 JavaScript 对象是否为空
【8月更文挑战第18天】
113 0
如何检查 JavaScript 对象是否为空
|
27天前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
29 1
|
21天前
|
存储 JavaScript 前端开发
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?