【JavaScript】window 对象、location 对象、navigator 对象和 history 对象

1. window 对象

请添加图片描述

BOM (Browser Object Model ) 是浏览器对象模型:

  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

2. location 对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象

属性/方法说明
href属性,获取完整的 URL 地址,赋值时用于地址的跳转
search属性,获取地址中携带的参数,符号 ?后面部分
hash属性,获取地址中的啥希值,符号 # 后面部分
reload()方法,用来刷新当前页面,传入参数 true 时表示强制刷新
<body><form><input type="text" name="search"> <button>搜索</button></form><a href="#/music">音乐</a><a href="#/download">下载</a><button class="reload">刷新页面</button><script>// location 对象  // 1. href属性 (重点) 得到完整地址,赋值则是跳转到新地址console.log(location.href)// location.href = 'http://www.itcast.cn'// 2. search属性  得到 ? 后面的地址 console.log(location.search)  // ?search=笔记本// 3. hash属性  得到 # 后面的地址console.log(location.hash)// 4. reload 方法  刷新页面const btn = document.querySelector('.reload')btn.addEventListener('click', function () {// location.reload() // 页面刷新location.reload(true) // 强制页面刷新 ctrl+f5})</script>
</body>

3. navigator 对象

navigator是对象,该对象下记录了浏览器自身的相关信息。

常用属性和方法:

  • 通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent(浏览器信息)
(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone,则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})();

4. histroy 对象

history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等。

history对象一般在实际开发中比较少用,但是会在一些OA 办公系统中见到。

常见方法:

请添加图片描述

<body><button class="back">←后退</button><button class="forward">前进→</button><script>// histroy对象// 1.前进const forward = document.querySelector('.forward')forward.addEventListener('click', function () {// history.forward() history.go(1)})// 2.后退const back = document.querySelector('.back')back.addEventListener('click', function () {// history.back()history.go(-1)})</script>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/184754.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI+BI行业数字化转型研讨会 - 总结精华回顾

带您一起观看研讨会精彩内容回顾&#xff01; || 导语 AIBI行业数字化转型研讨会—引领未来&#xff0c;智慧转型 德昂信息技术(北京)有限公司于2023年10月26日成功举办了AIBI行业数字化转型研讨会。此次盛会汇聚了产业精英、企业领袖以及技术专家&#xff0c;共同探讨在快速…

pycharm pro v2023.2.4(Python开发)

PyCharm是一种Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;PyCharm提供了强大的功能&#xff0c;包括语法突出显示、智能代码完成、代码检查、自动重构和调试等特性&#xff0c;这些都可以帮助Python开发人员更加高效地编写代码。 PyCharm Pro是PyCharm的高级版…

性能测试怎么入门?一文7个知识点带你成功入门!

一、相关概念 1、性能测试相关&#xff1a;负载测试&#xff0c;性能测试&#xff0c;压力测试&#xff0c;稳定性测试&#xff0c;全链路测试等 2、性能指标&#xff1a;吞吐率&#xff0c;tps&#xff0c;并发用户数&#xff0c;吞吐量&#xff0c;响应时间等 二、性能测试…

word办公小技巧:方框打勾、上下标、横隔线、排序

Word文件制作过程中&#xff0c;需要了解一些可以提高效率的小技巧帮助我们能够更快的完成工作&#xff0c;今天分享四个提高效率的小技巧 技巧一&#xff1a;方框内打√ 想要在word文件中设置出方框内√&#xff0c;的效果&#xff0c;在word文件中输入&#xff1a; ☑&…

cortex-A7核IIC实验--采集温湿度传感器的值

1.IIC总线---同步串行半双工 1&#xff09;一根数据线SDA--PF15&#xff0c;一根时钟线SCL--PF14 2&#xff09;传输速率&#xff1a;低速&#xff1a;100K 中速&#xff1a;400K 全速&#xff1a;3.4M 3&#xff09;外接两个上拉电阻的作用&#xff1a;总线空闲状态时&am…

图神经网络(GNN)性能优化方案汇总,附37个配套算法模型和代码

图神经网络的表达能力对其性能和应用范围有着重要的影响&#xff0c;是GNN研究的核心问题和发展方向。增强表达能力是扩展GNN应用范围、提高性能的关键所在。 目前GNN的表达能力受特征表示和拓扑结构这两个因素的影响&#xff0c;其中GNN在学习和保持图拓扑方面的缺陷是限制表…

esxi 6.7下安装黑裙

esxi上创建一个黑裙系统的虚拟机&#xff0c;用来存资料 一、工具 硬件&#xff1a; 工控机&#xff1a;装有esxi6.7系统&#xff08;192.168.100.2&#xff09;&#xff0c;配置&#xff1a;3865U&#xff0c;16G内存&#xff0c;120Gmsata120sata硬盘&#xff0c;6个网口 主…

JavaEE-博客系统3(功能设计)

本部分内容为&#xff1a;实现登录功能&#xff1b;强制要求用户登录&#xff1b;实现显示用户信息&#xff1b;退出登录&#xff1b;发布博客 该部分的后端代码如下&#xff1a; Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Ser…

Harmony OS—UIAbility的使用

概述 UIAbility是一种包含用户界面的应用组件&#xff0c;主要用于和用户进行交互。UIAbility也是系统调度的单元&#xff0c;为应用提供窗口在其中绘制界面。一个应用可以有一个UIAbility&#xff0c;也可以有多个UIAbility&#xff0c;类似于Android 的 Activity&#xff0c…

微服务-grpc

微服务 一、微服务&#xff08;microservices&#xff09; 近几年,微服这个词闯入了我们的视线范围。在百度与谷歌中随便搜一搜也有几千万条的结果。那么&#xff0c;什么是微服务 呢&#xff1f;微服务的概念是怎么产生的呢&#xff1f; 我们就来了解一下Go语言与微服务的千丝…

ConcurrentHashMap 源码解析

目录 一. 前言 二. 源码解析 2.1. 类结构 2.2. 基本属性 2.3. 构造方法 2.4. 增加元素 2.4.1. initTable() 2.4.2. helpTransfer() 2.4.3. transfer() 2.4.4. treeifyBin() 2.4.5. addCount() 2.5. 获取元素 2.6. remove() & replace() 2.7. clear() 2.8. s…

Leetcode—2578.最小和分割【简单】

2023每日刷题&#xff08;二十三&#xff09; Leetcode—2578.最小和分割 实现代码 class Solution { public:int splitNum(int num) {vector<int> a;while(num) {a.push_back(num % 10);num / 10;}int n a.size();sort(a.begin(), a.begin() n);int num1 0;int num…

AI全栈大模型工程师(十九)Semantic Kernel

文章目录 Semantic KernelSK 的开发进展SK 的生态位SK 基础架构后记 Semantic Kernel 先比较下 Semantic Kernel 和 LangChain。 Semantic KernelLangChain出品公司微软LangChain AI支持语言Python、C#、Java、TypeScriptPython、TypeScript开源协议MITMIT被应用在Microsoft …

使用ffmpeg调用电脑自带的摄像头和扬声器录制音视频

1、打开cmd&#xff0c;执行chcp 65001,修改cmd的编码格式为utf8&#xff0c;避免乱码 2、执行指令ffmpeg -list_devices true -f dshow -i dummy,查看当前window的音频和视频名称 3、打开windows系统的"打开声音设置"–“麦克风隐私设置”–"允许应用访问你…

扫码看视频是怎么做出来的?二维码加入视频的做法

视频用二维码来展示的方法是什么样的呢&#xff1f;相信大家在日常工作和生活中都遇到过&#xff0c;扫描二维码来观看视频的情况&#xff0c;那么视频存入二维码的方法是什么样的呢&#xff1f;下面来给大家分享一下具体的操作技巧&#xff0c;通过简单的步骤就可以快速完成二…

C++ string赋值和添加值

在MFC中使用C的string&#xff0c;要先#include <string>&#xff0c;然后&#xff0c;std::string s2("") 这样就可以了&#xff1b; void CStrnewView::OnDraw(CDC* pDC) {CStrnewDoc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw code for n…

SOLIDWORKS --流体仿真篇

SIMULIA流体仿真是什么? 模拟并预测复杂环境下围绕和穿过实体和结构的稳态及瞬态的内外部流(包括热传递)&#xff0c;例如湍流气流、颗粒运动、表面沉积等 .提供定性、定量以及可视化的分析手段,可实现多尺度多物理的视觉效果 SIMULIA流体仿真能做什么? 1.高效的仿真前处理…

NeRF神经辐射场渲染过程详解,三维重建渲染过程基本原理_光线采样sample_pdf()和光线渲染render_rays ()代码详解

目录 1 神经辐射场 1.1 基本原理 1.2 基本流程 1.3 数学解释 2 三维场景图像渲染详解 2.1射线采样 2.2 NeRF 模型预测 2.3 体积渲染 3 采样与渲染代码详解 &#xff08;rending.py&#xff09; 3.1 神经体积渲染代码解析 3.2 sample_pdf 函数 3.3 render_rays 函数 …

昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈

在NPU/GPU上进行模型训练计算&#xff0c;为了充分使用计算资源&#xff0c;一般采用批量数据处理方式&#xff0c;因此一般情况下为提升整体吞吐率&#xff0c;batch值会设置的比较大&#xff0c;常见的batch数为256/512&#xff0c;这样一来&#xff0c;对数据预处理处理速度…

爬虫项目-爬取股吧(东方财富)评论

1.最近帮别人爬取了东方财富股吧的帖子和评论&#xff0c;网址如下&#xff1a;http://mguba.eastmoney.com/mguba/list/zssh000300 2.爬取字段如下所示&#xff1a; 3.爬虫的大致思路如下&#xff1a;客户要求爬取评论数大于5的帖子&#xff0c;首先获取帖子链接&#xff0c…