BOM——window中的对象----------window中的方法及实例练习

最新推荐文章于 2022-05-26 10:00:40 发布

King·Forward

最新推荐文章于 2022-05-26 10:00:40 发布

阅读量1k

点赞数

分类专栏： JavaWeb 文章标签： button events xhtml javascript browser function

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8042307

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

BOM：Browser Object Model浏览器对象模型

window

|--history 历史记录
|--location地址栏对象
|--等等多个对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
	<input type="button" value="aaaaaaaaaaaa" οnclick="javascript:alert('aaaaaaaaaaaaaa');"/>
	<input type="button" value="事件源" οnclick="events();"/>
	<input type="button" value="location对象" οnclick="locationMethod();" />
<script type="text/javascript">
	function events(){
		var name=window.navigator.appName;
		var version=window.navigator.appVersion;
		var plat=window.navigator.platform;
		alert(name+"------------"+version+"--------------"+plat);
	}
	function locationMethod(){
		alert(window.location.href);//获取location的href地址
		window.location.href="http://www.baidu.com";//将本页面的地址定位到指定地址，并跳转
	}
</script>

</body>
</html>

window中的方法简介

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

	<input type="button" value="confirm" οnclick="events1();"/>
	<input type="button" value="moveBy" οnclick="events2();"/>
	<input type="button" value="moveTo" οnclick="events3();"/>
	<input type="button" value="resizeBy" οnclick="events4();"/>
	<input type="button" value="resizeTo" οnclick="events5();"/>
	<input type="button" value="moveBy集合小实例" οnclick="events6();"/>
	<input type="button" value="setTimeout" οnclick="events7();"/>
	<input type="button" value="清除setTimeout" οnclick="events8();"/>
	<input type="button" value="setInterval设定定时执行" οnclick="events9();"/>
	<input type="button" value="清除setInterval定时执行事件" οnclick="events10();"/>
	<input type="button" value="setInterval定时执行事件与移动窗体结合实例" οnclick="events11();"/>
	<br />
	<input type="button" value="open" οnclick="events12();"/>
	<input type="button" value="close" οnclick="events13();"/>
	
	
</body>
<script type="text/javascript">
	//声明：window可以省略，但为了更直观，我都加了window

	function events1(){
		var conf=window.confirm("你确定吗？");//confirm询问框
		window.alert("conf--------"+conf);
	}
	function events2(){
		window.moveBy(120,30);//该方法就是把当前浏览器窗口横纵坐标分别添加指定的值，第一个值为横坐标，第二个为纵坐标
	}
	function events3(){
		window.moveTo(120,30);//将当前浏览器窗口移动到指定横纵坐标位置
	}
	function events4(){
		window.resizeBy(30,30);//改变当前浏览器窗口的大小，对横纵坐标分别增加相应的值
	}
	function events5(){
		window.resizeTo(200,100);//将当前浏览器窗口设置成指定大小
	}
	function events6(){//模拟qq震屏方式，其实就是循环改变当前浏览器窗口位置，可以恶搞一下，哈哈
		for(var i=0;i<100;i++){//当然也可以加上moveTo,resizeBy,resizeTo等等恶搞一下，发挥一下嘛
			window.moveBy(10,0);
			window.moveBy(0,10);
			window.moveBy(-10,0);
			window.moveBy(0,-10);
		}
	}
	
	//设定多长时间后可触发，并可清除
	var Timeoutid;
	function events7(){
		//setTimeout("",毫秒数);两个参数，第一个参数是所要执行的，第二个参数是多长时间后开始执行，单位毫秒
		//window.setTimeout("window.alert('aaaaaaaaaaaaaaaa')",3000);//设定指定时间，来运行某一事件
		Timeoutid=window.setTimeout("events6()",2000);//ok，这样调用没问题，你可以试试
	}
	function events8(){
		window.clearTimeout(Timeoutid);//清除改事件
	}
	
	//设定每隔多长时间就触发一次，并可清除
	var intervalid;
	function events9(){
		intervalid=window.setInterval("window.alert('aaaaa')",2000);//设定每隔两秒就弹出对话框一次
	}
	function events10(){
		window.clearInterval(intervalid);//清除该定时执行事件
	}
	
	//setInterval与移动窗体结合
	function events11(){
		window.setInterval("method()",1000);//把当前窗体每隔1秒移动了四次，你懂的！！！！！！！！！！！
	}
	function method(){
		window.moveBy(10,0);
		window.moveBy(0,10);
		window.moveBy(-10,0);
		window.moveBy(0,-10);
	}
	
	function events12(){
		window.open("windowMethod.html");
	}
	function events13(){
		window.close();//关闭当前浏览器窗口，有区别：如果打开的就是本窗口，关闭时会出现询问框，如果通过open打开的窗口，会直接关闭
	}
	
</script>
</html>

实例练习

<script type="text/javascript">
	/*window.οnlοad=function(){
		alert("onload      --------");//在浏览器窗体加载完后，执行
	}
	window.οnunlοad=function(){
		alert("onunload      --------");//在关闭窗体后执行
	}
	window.οnbefοreunlοad=function(){
		alert("onbeforeunload      --------");//在关闭窗体前执行
	}*/
	
	//在本窗体加载时执行
	window.οnlοad=function(){
		open("window_property.html");
	}
	//在本窗体关闭时执行
	window.οnunlοad=function(){
		open("window_property.html");
	}
	window.setInterval("focus()",1000);//使本页面获取焦点，也就是放到页面的最前面，一秒执行 一次
</script>

King·Forward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM——window中的对象----------window中的方法及实例练习

BOM：Browser Object Model浏览器对象模型window|--history 历史记录|--location地址栏对象|--等等多个对象无标题文档 function events(){ var name=window.navigator.appName; var version=window.navigat
复制链接

扫一扫