JavaScript中的windon部分功能演示_javascript:showwaitdo-优快云博客

本文介绍了JavaScript中关键的页面事件 onload、onunload 和 onbeforeunload 的使用，以及如何通过navigator、history、location对象实现浏览器行为的控制。此外，还展示了如何利用Window对象的抖动、移动窗口和定时器功能，提供了丰富的JavaScript实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，onload,onunload onbeforeunload的使用

<span style="font-size:18px;"><!DOCTYPE html>
<html>
  <head>
    <title>event.html</title>
	<script type="text/javascript" src="1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
			onload=function(){//事件设置页面加载时执行的动作，即进入页面的时候执行的动作
				alert("onload...");
			}
			onunload =function(){//已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用
//一般用于设置当离开页面以后执行的动作。
				alert("onunload....");
			}
			onbeforeunload=function(){//是正要去服务器读取新的页面时调用，此时还没开始读取，简单来说就是在离开页面前的，一般用做提醒问你是不是要离开这个页面。
				alert("onbeforeunload...")
			}
//		nunload和onbeforeunload都是在页面刷新和关闭前的动作，但是onbeforeunload是先于onunload的并且
//Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到
	
	</script>
  </head>
  
  <body>
   <input type="button" value="按钮1" />
   <div>这是div的领域</div>
   <a href="http://www.baidu.com">go百度</a>
  </body>
</html></span>

2，navigator，history，location演示

<span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>演示网页</title>
		<script type="text/javascript" src="1.js"></script>
		<script type="text/javascript">
			function getBrowser() {
			var m1=window.navigator.appCodeName;//appCodeName 获取浏览器的代码名称。 
			var m2=window.navigator.appName;//appName 获取浏览器的名称。 
//			var m3=navigator.cpuClass;//获取指示 CPU 等级的字符串。
			var m4=window.navigator.cookieEnabled;//获取客户端的永久 cookie 是否在浏览器中启用。永久 cookies 是储存在客户端计算机上的。
			println("取浏览器的代码名称  :"+m1);
			println("获取浏览器的名称  :"+m2);
//			println("获取指示 CPU 等级的字符串  :"+m3);
			println("获取客户端的永久 cookie 是否在浏览器中启用。永久 cookies 是储存在客户端计算机上的。  :"+m4);
}	
			function windowsobj(){
				var pro =location.protocol;//设置或获取 URL 的协议部分
				println(pro);//file
				var text=location.href;//设置或获取整个 URL 为字符串。
				location.href="http://www.baidu.com";
				
			}
		</script>
    </head>
    <body>
        <input type="button" value="演示弹窗事件" onclick="alert('加油！！')"/><br/>
        <input type="button" value="演示navigator中的部分方法" onclick="getBrowser()"/><br />
        <input type="button" value="演示history中后退方法" onclick="history.back()"/><br />
        <input type="button" value="演示history中前进方法" onclick="history.forward()"/><br />
        <input type="button" value="演示history中go方法" onclick="history.go('http://www.baidu.com')"/><br/>
        <input type="button" value="演示中location的protocol方法" onclick="windowsobj()"/><br/>
    </body>
</html></span>

3，Window的具体应用：抖动，移动窗口，定时器

<span style="font-size:18px;"><!DOCTYPE html>
<html>
  <head>
    <title>methoddemo.html</title>
	
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="1.js"></script>
  </head>
  
  <body>
	   <script type="text/javascript">
	   		function f1(){
				alert("time....");
			}	
			function f2(){
				var  a=confirm("你确定吗");
				println("a:"+a);
			}
			function f3(){
				var bb=setTimeout("alert('timeout。。。')",2000);
			}
			function f4(){
				for (var i = 0; i < 100; i++) {
//					浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素)
					moveBy(20,0);
				moveBy(0,20);
				moveBy(-20,0);
				moveBy(0,-20);
				}
}

			//setInterval("alert('setInterval时间--')",10) 每经过指定毫秒值后计算一个表达式。
			function f5(){
				var aa=setInterval("alert('setInterval时间--')",1300);//设置频率
			}
			function f6(){
				var ss=clearInterval();
				
			}
			
	   </script>
	   <input type="button" value="演示window中的方法1--确认提示窗口" onclick="f2()"/>
	   <input type="button" value="演示window中的方法2--定时器1" onclick="f3()"/>
	   <input type="button" value="演示window中的方法3--抖动" onclick="f4()"/>
	   <input type="button" value="演示window中的方法4--setInterval" onclick="f5()"/>
	   <input type="button" value="演示window中的方法5--clearInterval" onclick="f6()"/>
  </body>
</html>
</span>