web前端javascript笔记——(14)Navigator 、History、Location

Navigator

<!DOCTYPE html><head><meta charset="UTF-8"><title></title><style></style><script type="text/javascript">/*DOM文档对象,通过js操作网页BOM  浏览器对象BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象。用来完成对浏览器的操作BOM对象window代表的是整个浏览器的窗口,同时window也是网页中的全局对象Navigator代表的是当前浏览器的信息,通过该对象可以来识别不同的浏览器由于历史原因,Navigator对象中的大部分属性都已经不能帮我们识别浏览器了一般我们只会使用userAgent(用户代理)来判断浏览器的信息,userAgents是一个字符串。这个字符串中包含有用来描述浏览器信息的内容不同的浏览器会有不同的userAgent用户代理等价于浏览器Location代表当前浏览器的地址栏信息,通过location可以获取地址栏信息,或者操作浏览器跳转页面History代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录由于隐私原因,该对象不能获取到具体的历史记录只能操作浏览器向前或向后翻页而且该操作只能在当此访问时有效Screen代表用户的屏幕信息,,通过该对象可以获取到用户的显示器的相关信息,这些BOM对象在浏览器中都是作为window对象的属性保存的可以通过window对象来使用,也可以直接使用*/window.onload = function() {//        alert(navigator.appName);//Netscape   网景公司 不再管用了//        alert(navigator.userAgent);      //用户代理等价于浏览器//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36var ua=navigator.userAgent;console.log(ua);if(/firefox/i.test(ua)){alert("你是火狐!");   //正则表达式匹配}else if(/chrome/i.test(ua)){alert("你是Chrome");}else if(/msie/i.test(ua)){   //正则表达式.test(被测试的东西)alert("你是IE浏览器");//在IE11中已经将微软和IE相关的标识都已经去掉了,所以我们基本已经不能通过userAgent来识别一个浏览器是否是IE了}else if("ActiveXObject" in window){alert("你是IE11,枪毙了你");}/*如果通过userAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息*///比如ActiveXObject     有些对象和方法是有的浏览器所特有的if(window.ActiveXObject){alert("你是IE,我已经抓住你了");}else{alert("你不是IE");}alert(window.ActiveXObject); //undefinedalert(!!window.ActiveXObject);  //false   这样可以转为boolean值};</script></head><body></body></html>

History

History
对象可以用来操作浏览器向前或向后翻页
length
history.length
属性,可以获取到当前访问的链接数量

back()                history.back();

——可以用来回退到上一个页面,作用和浏览器的回退按钮一样
foward()          history.forward();
——可以跳转到下一个页面,作用和浏览器的前进按钮一样
go()                   history.go()

——可以用来跳转到指定的页面

——它需要一个整数作为参数
1.表示向前跳转一个页面
2.表示向前跳转两个页面
-1表示向后跳转一个页面
 -2表示向后跳转两个页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>/*History对象可以用来操作浏览器向前或向后翻页*//*length* history.length属性,可以获取到当前访问的链接数量*/window.onload=function(){//	alert(history.length);var btn=document.getElementById("btn");btn.onclick=function(){/*back()——可以用来回退到上一个页面,作用和浏览器的回退按钮一样foward()——可以跳转到下一个页面,作用和浏览器的前进按钮一样go()——可以用来跳转到指定的页面——它需要一个整数作为参数1.表示向前跳转一个页面2.表示向前跳转两个页面-1表示向后跳转一个页面-2表示向后跳转两个页面*/history.back();history.go(-2);};};</script></head><body><h1>history</h1><button id="btn"></button></body>
</html>

Location

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>/*Location该对象中封装了浏览器的地址栏的信息*/window.onload=function(){//	alert(history.length);var btn=document.getElementById("btn");btn.onclick=function(){//如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)	//	alert(location);/*如果直接将location属性修改为一个完整的路径,或相对路径则我们的页面会自动跳转到该路径,并且会生成相应的历史记录*///		location="http://www.baidu.com";/*assign()用来跳转到其他的页面,作用和直接修改location一样*///	location.assign("http://www.baidu.com");/*reload()用于重新加载当前页面,作用和刷新按钮一样如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面* *///	location.reload(true);  //和Ctrl+F5的作用一样/*replace()* 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面不会生成历史记录,不能使用回退按钮回退* */location.replace("http://www.baidu.com");};};</script></head><body><h1>history</h1><button id="btn">按钮一</button></body>
</html>

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

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

相关文章

HarmonyOS4.0系统性深入开发26方舟开发框架(ArkUI)概述

方舟开发框架&#xff08;ArkUI&#xff09;概述 方舟开发框架&#xff08;简称ArkUI&#xff09;为HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览…

林浩然的数学奇遇记:从计算机视觉到深海中的数学宝藏

林浩然的数学奇遇记&#xff1a;从计算机视觉到深海中的数学宝藏 Lin Haoran’s Mathematical Odyssey: From Computer Vision to Mathematical Treasures in the Deep Sea 在那个充满像素与算法的世界里&#xff0c;有一位名叫林浩然的主角&#xff0c;他并非怀揣着成为华罗庚…

【视野提升】ChatGPT的系统是如何工作的?

类似ChatGPT的系统是如何工作的&#xff1f; 我们试图在下图中解释它是如何工作的。这个过程可以分为两个部分。 训练 要训练一个ChatGPT模型&#xff0c;有两个阶段&#xff1a; 预训练 在这个阶段&#xff0c;我们在大量互联网数据上训练一个GPT模型&#xff08;仅解码器转…

【mongoDB】数据库的创建和删除

目录 1. 查看所有数据库 2.创建数据库 3.查看当前连接的数据库 4.删除数据库 1. 查看所有数据库 show dbs 2.创建数据库 use 数据库名 例如创建一个名为 aaa 的数据库 3.查看当前连接的数据库 db 4.删除数据库 use 数据库名 db.dropDataBase() 比如删除数据库 aaa

记录CentOS8安装docker全过程

目录 环境说明CentOS系统环境docker安装具体步骤 环境说明 Windows11 系统上安装了虚拟机VMware Workstation 12 Pro&#xff0c;VMware中安装了CentOS版本&#xff1a;8.5.2111。&#xff08;主要遇到的问题就在CentOS的版本上出现的&#xff09; CentOS系统环境 因为是新安…

《WebKit技术内幕》学习之十三(3):移动WebKit

3 其他机制 3.1 新渲染机制 为了移动领域更好的用户体验&#xff0c;渲染机制所做的改进主要是提升渲染性能来增加响应的速度&#xff0c;甚至不惜牺牲一些跟规范定义的行为不一致的地方。在这一小节中主要介绍三个方面的技术&#xff0c;其一是Tiled Backing Store&#x…

vue3 组件通信 mitt

mitt 安装 pnpm add mitttypescript 在 tsconfig.json 中设置 “strict”: true {"compilerOptions": {"strict": true,} }使用 导出 emitter src/utils/mitt/index.ts import mitt from mitttype Events {get-name: string }export const emitter …

[Python] 机器学习 - 常用数据集(Dataset)之鸢尾花(Iris)数据集介绍,数据可视化和使用案例

鸢(yuān)尾花(Iris)数据集介绍 鸢【音&#xff1a;yuān】尾花&#xff08;Iris&#xff09;是单子叶百合目花卉&#xff0c;是一种比较常见的花&#xff0c;而且鸢尾花的品种较多&#xff0c;在某个公园里你可能不经意间就能碰见它。 鸢尾花数据集最初由Edgar Anderson 测量…

Springboot,使用sharedingjdbc 分库分表,最佳实践。

一、简介 Apache ShardingSphere 是一套开源的分布式数据库解决方案组成的生态圈&#xff0c;它由 JDBC、Proxy 和 Sidecar&#xff08;规划中&#xff09;这 3 款既能够独立部署&#xff0c;又支持混合部署配合使用的产品组成。 它们均提供标准化的数据水平扩展、分布式事务和…

我在代码随想录|写代码Day17之二叉树-222.完全二叉树的节点个数,110.平衡二叉树,257. 二叉树的所有路径

学习目标&#xff1a; 博主介绍: 27dCnc 专题 : 数据结构帮助小白快速入门 &#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d;&#x1f44d; ☆*: .&#xff61;. o(≧▽≦)…

数学建模绘图

注意&#xff1a;本文章旨在记录观看B站UP数模加油站之后的笔记文章&#xff0c;无任何商业用途~~ 必备网站 以下网站我都试过&#xff0c;可以正常访问 配色&#xff08;取色&#xff09;网站&#xff1a; Color Palettes Generator and Color Gradient Tool Python&#x…

Pandas ------ 通过 np.array 函数去掉数据中的 index

Pandas ------ 通过 np.array 函数去掉数据中的 index 引言正文 引言 在做 pandas 数据处理的时候遇到了一个问题&#xff0c;获取到的数据总是会带有 dateframe 的格式&#xff0c;即总会有 index 显示出来。为了去掉这些显示&#xff0c;我们可以使用 np.array() 函数进行数…

python Django入门

1.创建Django项目 方式一:进入到指定要存放项目的目录&#xff0c;执行*django-admin startproject “projectname”* 来创建一个名方式二:使用Pycharm专业版创建Django项目 创建项目后&#xff0c;默认的目录结构: manage.py:是Django用于管理本项目的命令行工具&#xff0c…

HarmonyOS鸿蒙学习基础篇 - Text文本组件

该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 Text文本组件是可以显示一段文本的组件。该组件从API Version 7开始支持&#xff0c;从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 子组件 可…

KG110写频 AT28C64芯片替换

上一个文章写了写频计算公式 https://blog.csdn.net/firseve/article/details/135743549 没想到就几天好多人给点赞&#xff0c;这个中继现在还有很多人在使用么&#xff1f;谁能给解个惑 今天搜了下这个中继设备&#xff0c;默认原机器使用的芯片是 2716 2732 &#xff08;2…

php怎么输入一个变量,http常用的两种请求方式getpost(ctf基础)

php是网页脚本语言&#xff0c;网页一般支持两种提交变量的方式&#xff0c;即get和post get方式传参 直接在网页URL的后面写上【?a1027】&#xff0c;如果有多个参数则用&符号连接&#xff0c; 如【?a10&b27】 post方式传参 需要借助插件&#xff0c;ctfer必备插…

自学C语言-6

第6章 选择结构程序设计 顺序结构程序设计最简单&#xff0c;但通常无法解决生活中的选择性问题。选择结构程序设计需要用到一些条件判断语句&#xff0c;可实现的程序功能更加复杂&#xff0c;程序的逻辑性与灵活性也更加强大。 本章致力于使读者掌握使用if语句进行条件判断的…

美易平台:好未来股价盘前大涨

近日&#xff0c;教育行业巨头好未来在美股市场盘前交易中涨幅超过6%&#xff0c;这一现象引起了市场的广泛关注。据悉&#xff0c;好未来第三季度的净营收超出了市场预期&#xff0c;这一积极的财务表现为其股价带来了强劲的上涨动力。在此背景下&#xff0c;投资者对于互联网…

OpenHarmony开发——GN快速上手

背景 最近在研究鸿蒙操作系统的开源项目OpenHarmony&#xff0c;该项目使用了GNNinja工具链进行配置&#xff0c;编译&#xff0c;于是开始研究GN如何使用。 本文的所有信息均来自GN官网和本人个人体会。 GN快速入门 使用GN GN的主要功能是根据配置文件&#xff08;.gn, BU…

交换机跨VLAN交换数据ip跳转分析(不一定对)

在网上看到这样一个实验&#xff1a; 交换机1、交换机2分别连接到一台防火墙上&#xff0c;要求使VLAN 2、VLAN3、VLAN5、VLAN6中的终端可互相访问。 拓补 参考链接 【数通网络交换基础梳理2】三层设备、网关、ARP表、VLAN、路由表及跨网段路由下一跳转发原理_网管型交的机…