JavaScript中的BOM: history-Location-Navigator

BOM(浏览器对象模型)

- BOM中为我们提供了一组对象，借助这组对象可以通过JS来操作浏览器

Window （代表整个浏览器窗口，全局对象）

Navigator （表示浏览器的信息）

Location （表示浏览器地址栏信息）

History （表示浏览器的历史记录）

Screen （表示用户的设备的屏幕信息）

- BOM对象都是window对象的属性，可以通过window对象访问，也可以直接访问

window.navigator

1:BOM: history-Location:

location 表示的是浏览器的地址栏信息

- 可以通过window.location 或 location来对其进行访问

- location用于获取或设置浏览器的地址栏

- 如果直接打印location可以获取到浏览器的地址栏信息

- 也可以对其进行修改，修改后浏览器将会跳转到修改后的地址

通过修改location跳转地址会产生历史记录

assign()

- 用来修改location的值，和直接修改location效果一样

replace()

- 使用新的页面替换当前页面，不会生成历史记录

reload()

- 刷新当前页面，相当于刷新按钮

reload(true)

- 强制清缓存刷新页面

History

- 表示浏览器的历史记录

- 可以通过window.history 或 history来对其进行访问

- 历史记录这种东西属于个人隐私，所以JS无法直接访问用户的历史记录

它只能用来控制浏览器向前向后翻页

history.forward()

- 用来切换到下一页，就相当于浏览器的向前按钮

history.back()

- 用来回退到上一页，相当于浏览器的回退按钮

history.go();

- 用来跳转到只能的记录

- 需要一个整数作为参数：

1 前进1页

2 前进2页

-1 回退1页

-2 回退2页

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>BOM</title><script>/*BOM(浏览器对象模型)- BOM中为我们提供了一组对象，借助这组对象可以通过JS来操作浏览器Window （代表整个浏览器窗口，全局对象）Navigator （表示浏览器的信息）Location （表示浏览器地址栏信息）History （表示浏览器的历史记录）Screen （表示用户的设备的屏幕信息）- BOM对象都是window对象的属性，可以通过window对象访问，也可以直接访问window.navigator*/// alert(navigator);// alert(location);// alert(history);/*location 表示的是浏览器的地址栏信息- 可以通过window.location 或 location来对其进行访问- location用于获取或设置浏览器的地址栏- 如果直接打印location可以获取到浏览器的地址栏信息- 也可以对其进行修改，修改后浏览器将会跳转到修改后的地址通过修改location跳转地址会产生历史记录assign()- 用来修改location的值，和直接修改location效果一样replace()- 使用新的页面替换当前页面，不会生成历史记录reload()- 刷新当前页面，相当于刷新按钮reload(true)- 强制清缓存刷新页面History- 表示浏览器的历史记录- 可以通过window.history 或 history来对其进行访问- 历史记录这种东西属于个人隐私，所以JS无法直接访问用户的历史记录它只能用来控制浏览器向前向后翻页history.forward()- 用来切换到下一页，就相当于浏览器的向前按钮history.back()- 用来回退到上一页，相当于浏览器的回退按钮history.go();- 用来跳转到只能的记录- 需要一个整数作为参数：1 前进1页2 前进2页-1 回退1页-2 回退2页*/window.onload = function () {var btn01 = document.getElementById('btn01');btn01.addEventListener('click',function () {// alert(location.host);// location = 'https://www.baidu.com';// location.assign('02_创建游戏界面.html');// location.replace('https://www.baidu.com');// location.reload(true);history.go(-2);});};</script></head><body><button id="btn01">点我一下</button><input type="text"></body></html>

2BOM- Navigator:

Navigator

- 该对象表示的是浏览器的信息

- 可以通过 window.navigator 或 navigator来对其进行访问

- 可以通过navigator来识别浏览器的信息

- 由于历史原因Navigator中的大部分属性都不能用来识别浏览器

- 只剩下一个还有点用的属性 userAgent

userAgent 是一个字符串，字符串中包含浏览器的描述信息

- 火狐的：

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

- Chrome

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4168.2 Safari/537.36

- IE

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

- IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>/*Navigator- 该对象表示的是浏览器的信息- 可以通过 window.navigator 或 navigator来对其进行访问- 可以通过navigator来识别浏览器的信息- 由于历史原因Navigator中的大部分属性都不能用来识别浏览器- 只剩下一个还有点用的属性 userAgentuserAgent 是一个字符串，字符串中包含浏览器的描述信息- 火狐的：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0- ChromeMozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4168.2 Safari/537.36- IEMozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko- IE10Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)*/var ua = navigator.userAgent;// console.log(ua);// if(/Firefox/.test(ua)){// alert('你是火狐~~');// }else if(/Chrome/.test(ua)){// alert('你是Chrome~~');// }// 可以通过一些IE中独有的对象来判断一个浏览器是不是IE浏览器if('ActiveXObject' in window){alert('哈哈哈~你是IE');}else{alert('你不是IE');}// console.log(!!window.ActiveXObject);</script></head><body></body></html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

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

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

相关文章

IC卡和RFID卡的区别

IC卡和RFID卡的区别

简而言之&#xff0c;IC卡的原理即RFID&#xff0c;而RFID卡的范围更广&#xff0c;包括有ID卡、IC卡和NFC卡以及其它等电子卡/标签。他们主要的区别在于工作频段。 IC卡分为接触式和非接触式IC卡&#xff0c;都属于RFID范畴&#xff0c;接触式IC卡其芯片直接封装在卡基表面&am…
阅读更多...
【数据结构】-- 单链表 vs 双向链表

【数据结构】-- 单链表 vs 双向链表

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;python从入门到精通&#xff0c;魔法指针&#xff0c;进阶C&#xff0c;C语言&#xff0c;C语言题集&#xff0c;C语言实现游戏&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文…
阅读更多...
动态规划刷题（2）之杨辉三角（详细解释）

动态规划刷题（2）之杨辉三角（详细解释）

最近在自学动态规划，网上到处找资料学习： 在这里记录我的刷题历史： 题目都是在力扣里面刷的!! 这里，我放一个刷动态规划的链接在这里：动态规划知识点题库 - 力扣（LeetCode） 力扣 在这里附加动态规划相关知识点：动态规划（DP）-CSDN博客文章浏览阅读197次。动态规划…
阅读更多...
算法第四十一天-排除排序链表中的重复元素Ⅱ

算法第四十一天-排除排序链表中的重复元素Ⅱ

排除排序链表中的重复元素Ⅱ 题目要求 解题思路 题意&#xff1a;在一个有序链表中&#xff0c;如果一个节点的值出现不止一次&#xff0c;那么把这个节点删除掉 重点&#xff1a;有序链表&#xff0c;所以&#xff0c;一个节点的值出现不止一次&#xff0c;那么他们必相邻。…
阅读更多...
uniapp_微信小程序_NaN

uniapp_微信小程序_NaN

一、定义 isNaN() 函数用于检查一个值是否为 NaN。它接受一个参数&#xff0c;该参数可以是任何 JavaScript 数据类型&#xff0c;包括数字、字符串、对象等。如果参数是 NaN&#xff0c;或者不能被转换为数字&#xff0c;则 isNaN() 返回 true&#xff1b;否则返回 false。 …
阅读更多...
爬虫 新闻网站 以湖南法治报为例（含详细注释，控制台版） V2.0 升级自定义查询关键词、时间段

爬虫 新闻网站 以湖南法治报为例（含详细注释，控制台版） V2.0 升级自定义查询关键词、时间段

目标网站&#xff1a;湖南法治报 爬取目的&#xff1a;为了获取某一地区更全面的在湖南法治报已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff…
阅读更多...
Redis-缓存击穿-逻辑过期

Redis-缓存击穿-逻辑过期

Redis-缓存击穿-逻辑过期实现 缓存击穿&#xff1a;也称热点key问题&#xff0c;大量访问一个key&#xff0c;而这个key恰巧到期了&#xff0c;导致大量的请求访问数据库。增大数据库的负担。为了解决这个问题可以采用互斥锁或逻辑过期的方式解决。本章采用逻辑过期的方式解决…
阅读更多...
基于微信小程序的苏州博物馆文创产品售卖系统

基于微信小程序的苏州博物馆文创产品售卖系统

前言 基于小程序的苏州博物馆文创产品售卖系统的设计与实现能够通过互联网得到广泛的、全面的宣传&#xff0c;让尽可能多的用户了解和熟知基于小程序的苏州博物馆文创产品售卖系统的设计与实现的便捷高效&#xff0c;不仅为群众提供了服务&#xff0c;而且也推广了自己&#…
阅读更多...
leetcode209--长度最小的子数组

leetcode209--长度最小的子数组

1. 题意 找到最小满足和大于 t a r g e t target target的子数组长度。 长度最小的子数组 2. 题解 2.1 滑动窗口 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {int l 0;int sum 0;int sz nums.size();int ans INT_MAX;for (…
阅读更多...
【leetcode面试经典150题】37. 矩阵置零（C++）

【leetcode面试经典150题】37. 矩阵置零（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
堆 和 优先级队列

堆 和 优先级队列

目录 一、堆 二、优先级队列 1、初识优先级队列 2、实现一个优先级队列 3、PriorityQueue &#xff08;1&#xff09;实现了Comparable接口&#xff0c;重写了compareTo方法 &#xff08;2&#xff09;实现了Comparator接口&#xff0c;重写了compare方法 4、 Prio…
阅读更多...
Django+Celery框架自动化定时任务开发

Django+Celery框架自动化定时任务开发

本章介绍使用DjCelery即DjangoCelery框架开发定时任务功能&#xff0c;在Autotestplat平台上实现单一接口自动化测试脚本、业务场景接口自动化测试脚本、App自动化测试脚本、Web自动化测试脚本等任务的定时执行、调度、管理等&#xff0c;从而取代Jenkins上的定时执行脚本和发送…
阅读更多...
windows安装Redis，Mongo，ES并快速基本掌握开发流程

windows安装Redis，Mongo，ES并快速基本掌握开发流程

前言 这里只是一些安装后的基础操作&#xff0c;后期会学习更加深入的操作 基础操作 前言RedisRedis启动idea集成Redisjedis技术 Mongodbwindows版Mongodb的安装idea整合Mongodb ES(Elasticsearch)ESwindows下载ES文档操作idea整合ES低级别ES整合高级别ES整合 Redis Redis是…
阅读更多...
深入理解JVM后端优化技术-方法内联

深入理解JVM后端优化技术-方法内联

相关系列 深入理解JVM后端优化技术-逃逸分析(Escape Analysis)-CSDN博客 深入理解JVM后端优化技术-锁消除&#xff08;Lock Elision)-CSDN博客 深入理解JVM后端优化技术-锁粗化(Lock Coarsening)-CSDN博客 jvm只是负责依次将字节码指令逐次转换成机器码。而在转换过程中&#x…
阅读更多...
计算机网络----第五天

计算机网络----第五天

广域网基本原理 局域网问题&#xff1a; 问题&#xff1a;以太网等局域网技术无法支持远程传输 广域网目的&#xff1a; 目的&#xff1a;基于电信运营商的通信网络设施建立远程连接 在相聚遥远的局域网之间建设连接性 广域网连接方式&#xff1a; 方式&#xff1a;电路交…
阅读更多...
【THM】Net Sec Challenge（网络安全挑战）-初级渗透测试

【THM】Net Sec Challenge（网络安全挑战）-初级渗透测试

介绍 使用此挑战来测试您对网络安全模块中获得的技能的掌握程度。此挑战中的所有问题都可以仅使用nmap、telnet和来解决hydra。 挑战问题 您可以使用Nmap、 Telnet 和Hydra回答以下问题。 2.1小于10000的最大开放端口号是多少？ 8080 nmap -p- -T4 10.10.234.218 2.2普通…
阅读更多...
gurobi不同版本切换

gurobi不同版本切换

每年年底&#xff0c;gurobi都会推出新版本。新版本是大的迭代更新&#xff0c;求解问题的效率和精度都会提升。官方人员一般会建议我们安装最新的版本&#xff0c;此外&#xff0c;写论文审稿专家也会建议我们使用较新的版本。 从我们现装的版本切换到新版本。我以往的做法是…
阅读更多...
App测试收集总结

App测试收集总结

Monkey monkey是安卓的命令行工具&#xff0c;可以运行在虚拟机或者实际设备中。 monkey的目的就是为了测试app的稳定性&#xff0c;看App是否会崩溃 monkey的特点:只能对程序包进行测试&#xff0c;无法对源码进行测试&#xff1b;moneky的事件数据流是随机的&#xff0c;无法…
阅读更多...
接口自动化测试利器，使用Rest Assured进行REST API测试

接口自动化测试利器，使用Rest Assured进行REST API测试

我们在做接口测试时&#xff0c;一般在代码中会使用HttpClient&#xff0c;但是HttpClient相对来讲还是比较麻烦的&#xff0c;代码量也相对较多&#xff0c;对于新手而言上手会比较难一点&#xff0c;今天我们来看下另一个接口测试工具包REST Assured REST Assured是一个流行…
阅读更多...
麒麟V10安装Redis6.2.6

麒麟V10安装Redis6.2.6

1、下载redis安装包 Redis各版本下载&#xff1a;https://download.redis.io/releases/ 2、将下载后的.tar.gz压缩包上传到到服务器自定义文件夹下 3、 解压文件 tar -zxvf redis-6.2.6.tar.gzmv redis-6.2.6 redis4、安装redis 在redis文件夹下输入make指令 cd /opt/redi…
阅读更多...
最新文章

Copyright @ 2022~2023