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.36
	        var 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); //undefined
	       alert(!!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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

谷歌公布一个可以让 AI 进行自我判断输出内容正确性的模型训练框架 ASPIRE

谷歌开发了一款名为 ASPIRE 的训练框架&#xff0c;旨在增强人工智能&#xff08;AI&#xff09;模型的选择性预测能力。这款框架为模型引入了 “可信度” 机制&#xff0c;即模型会输出一系列答案&#xff0c;并为每个答案赋予一个正确概率评分。通过这种方式&#xff0c;ASPI…

day2 C++

封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <iostre…

mysql生成最近24小时整点最近30天最近12个月时间临时表

文章目录 生成最近24小时整点生成最近30天生成最近12个月 在统计的时候需要按时间来展示&#xff0c;但是数据的时间不一定是连续的&#xff0c;那就需要在代码里面生成连续的时间&#xff0c;然后按时间匹配到对应的数据&#xff0c;这样比较麻烦&#xff0c;可以在sql中使用连…

写点东西《检查和更新NPM包》

写点东西《检查和更新NPM包》 检查和更新 NPM 包 TL;DR&#xff1b; 用于检查和更新软件包的 NPM 命令# [](#npm-outdated)npm outdatednpm updatenpm update --save-dev --savenpm update -g npm-check-updates 检查和更新软件包的命令npm install -g npm-check-updatesnpx np…

蓝桥杯备赛 week 1 —— DP 背包问题

目录 &#x1f308;前言&#x1f308;&#xff1a; &#x1f4c1; 01背包问题 分析&#xff1a; dp数组求解&#xff1a; 优化&#xff1a;滚动数组&#xff1a; &#x1f4c1; 完全背包问题 &#x1f4c1; 总结 &#x1f308;前言&#x1f308;&#xff1a; 这篇文章主…

gin框架开发基础功能实践汇总

gin定位&#xff1a;一款高性能的go web框架 基本实践一次搞定&#xff01; 目录 项目结构 main.go&#xff08;多组路由&#xff09; 以order.go测试GET各请求 以customer.go测试POST/PUT请求 调用目标API前先校验(多处理器) 多路由API执行前校验 项目结构 main.go&…

Webpack5 基本使用 - 3(完结)

环境区分 可以定义多个配置文件&#xff0c;通过 webpack-merge 合并配置文件。 安装 webpack-merge yarn add webpack-merge公共配置 // webpack.common.js const path require(path) const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: path…

牛客——都别吵吵了,我才是签到(质因数分解和统计质因数次数)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 陶陶刚上一年级&#xff0c;今天数学课上老师教了乘法和除法&#xff0c;老师留了一道课后习题&#xff0c;陶陶很快地写完了&#xff0c;现在想请你帮助他检查一下是否和答案一致。…

Ubuntu 申请 SSL证书并搭建邮件服务器

文章目录 Log 一、域名连接到泰坦&#xff08;Titan&#xff09;电子邮件二、NameSilo Hosting 避坑三、Ubuntu 搭建邮件服务器1. 环境准备2. 域名配置3. 配置 Postfix 和 Dovecot① 安装 Nginx② 安装 Tomcat③ 申请 SSL 证书&#xff08;Lets Encrypt&#xff09;④ 配置 pos…

ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

用了网上的办法&#xff1a; 1、修改listener.ora的参数,把动态的参数设置为静态的参数,红色标注部分 位置D:\oracle\product\10.2.0\db_1\NETWORK\ADMIN SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME PLSExtProc) (ORACLE_HOME D:\oracle\produ…

C++练习题1-9

文章目录 NO1、选出妃子、宫女和嬷嬷No2、根据数字判断月份No3、循环计数No4、循环选数No5、玩转字符No6、计算字符串长度No7、显示字符串中的字符No8、字符串反转No9、二维数组的应用 NO1、选出妃子、宫女和嬷嬷 其他要求&#xff1a; 超女用结构体表示不要嵌套if输入所有数据…

博物馆环境监控系统的需求是怎么来的???

一、博物馆环境基本调研和识别需求 在环境监测软件的需求中&#xff0c;首要任务是进行深入的基本调研。这包括把握已有的环境监测技术、标准与法规&#xff0c;以及用户的实际操作过程和困惑。积极与环保局、科研院所、公司等沟通&#xff0c;可搜集很多原始记录&#xff0c;…

MySQL的SQL分类与数据类型

MySQL是一款广泛使用的关系型数据库管理系统&#xff0c;开源、免费且跨平台&#xff0c;常用于存储、管理和检索结构化数据&#xff0c;并通过SQL语言支持高效的数据操作与管理。 文章目录 何为SQLSQL分类DDLDMLDCLTCLDQL MySQL的数据类型数值型日期型字符串型二进制型其他类型…

网安培训第一期——sql注入+文件

文章目录 sql inject报错注入time盲注联合查询万能密码拦截和过滤ascii注入流程base64查询的列名为mysql保留关键字key 文件上传ffuf脚本要做的三件事网络端口进程用户权限文件文件包含文件下载XSS跨站请求攻击csrf跨站请求伪造 sql inject 判断输入字段是字符串还是数字 方法…

【GitHub项目推荐--开源小游戏】【转载】

01 回合制生存游戏 Cataclysm-DDA 是一款回合制生存游戏&#xff0c;背景设置在后世界末日的世界中。虽然有些人将其描述为“僵尸游戏”&#xff0c;但《大灾变》远不止这些。努力在一个严酷、持久、程序生成的世界中生存。 为食物、设备寻找一个死去的文明的残余物。或者&am…

arcgis 面要素shp数据处理

面要素是工作中用到最多的&#xff0c;那么面要素是如何形成的呢&#xff0c;主要还是由闭合的线要素转换而成。在面要素数据中常用的有以下几点&#xff1a; 一、 线转面&#xff08;要素转面&#xff09; 通过上一篇得到了点转线的要素&#xff0c;那么根据上节的线要素&am…

大模型学习笔记一:大模型应用开发基础

文章目录 一、大模型一些概念介绍 一、大模型一些概念介绍 1&#xff09;产品和大模型的区别&#xff08;产品通过调用大模型来具备的能力&#xff09; 2&#xff09;AGI定义 概念&#xff1a;一切问题可以用AI解决 3&#xff09;大模型通俗原理 根据上文&#xff0c;猜测下…

1174:长整数排序(指针专题)

题目描述 长整数排序。输入n 然后输入n个位数不超过100位的大整数&#xff0c;输入的整数可能含有前导0。将这n个长整数排序后输出&#xff0c;输出不含前导0。int greater(char *s1, char *s2){若s1指向的整数大于s2指向的整数&#xff0c;返回一个正整数;若s1指向的整数小于s…

重生之C++王者归来DAY1

c的概述 c的编程思想&#xff1a;面向对象、泛型编程。 1.第一个c程序 本文用的是QT&#xff0c;VS之类的也可 2.c面向对象的三大特性&#xff08;重要&#xff09; 封装:将相同属性的数据和方法封装在一起&#xff0c;加权限区分&#xff0c;用户只能借助公共方法操作 私有…

PCL 高斯投影正算:大地坐标转高斯投影坐标(C++详细过程版)

目录 一、算法原理二、代码实现三、结果展示四、测试数据PCL 高斯投影正算:大地坐标转高斯投影坐标(C++详细过程版)由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 二、代码实现 头文件及读取保存函数见: