历史跳转的js

最新推荐文章于 2024-01-19 21:21:00 发布

Fxz_Jyy

最新推荐文章于 2024-01-19 21:21:00 发布

阅读量503

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Fxz_Jyy/article/details/80245176

版权

4 篇文章 0 订阅

订阅专栏

今天老师给我们模仿了一下有关类似历史记录的代码，但它的运行不是依靠游览器里的历史记录。还学习了两个新属性（screen navigator）下面让我拿简单的代码演示一小下。。。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	</script>
	</head>
	<body style="text-align:center;font-size:20px;background:#6ff">
	<a href="javascript:location.href='top2.html';">location的href属性实现跳转</a>
	<br/><br/>
	<a href="javascript:history.go(1);">history的go方法实现前进</a>
	</body>
	</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body style="text-align:center;font-size:20px;background:#6ff">
	<a href="javascript:history.back();">history的back方法实现后退</a>
	<br/><br/>
	<a href="javascript:location.reload();">location的reload的方法实现刷新</a>
	</body>
	</html>

以上是在top1和top2里模仿历史记录的

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	function openWindow(num){
	//web浏览器的可用屏幕宽度，不包括任务栏。
	var winWidth=screen.availWidth/2;
	var winHeight=screen.availHeight/2;
	//窗口居中处理
	var winTop=(screen.availHeight-winHeight)/2;
	var winLeft=(screen.availHeight-winWidth)/2;
	//设计坐标参数字符串
	var para="top="+"+winTop+",left="+winLeft+",width="+winWidth+",height="+winHeight+";
	//打开新的窗口
	var win=window.open("Navigator.html","url,para");
	//是窗口获得焦点
	win.focus();
	}
	</script>
	</head>
	<body>
	<input type="button" value="打开新窗口" onclick="openWindow('1')">
	</body>
	</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	document.write("浏览器名称："+navigator.appName+"<br>");
	document.write("浏览器版本："+navigator.appVersion+"<br>");
	document.write("客户端的操作系统："+navigator.platform+"<br>");
	</script>
	</head>
	<body>

	</body>
	</html>

以上通过按钮调出浏览器的名称，版本和客户端的系统等信息。。。。是不是很神奇

关注