js_day23--js DOM编程（history+location+navigator+screen+event对象）_js编写location和screen等其他对象的演示代码-CSDN博客

本文链接：https://blog.csdn.net/gavin_john/article/details/21738675

Day23

history 对象

作用：Contains information about the URLs visitedby the client

即：该对象包含客户端访问过的URL信息

从dom层次图看，history是windows对象的成员属性，但实际上history是javascriptruntime engine 自动创建的，所以你也可以认为history就是一个javascript对象。

history最重要的作用是可以返回到原来访问过的某个页面去，但现在很多浏览器都把这个禁用了，出于安全考虑。

IE 支持，猎豹浏览器不支持！

history.back()返回上一个访问的URL

等价于history.go(-1)；

history.length.总共访问过的URL数

history.forward()加载历史列表中的下一个URL

Html1:

<html>
	<head>
		<title>window.test</title>
	</head>	
	<body>
		<a href="day_23_2.html" >访问第二个界面</a>
	</body>
</html>

Html2:

<html>
	<head>
		<title>Test</title>
		<script language="javascript" type="text/javascript">
			function goBack(){
				window.alert(history.length);//总共访问过的页面数
				history.back();//back方法可以加载历史列表中的前一个URL
				//history.go(-1);//这句话等价于back()
			}
		</script>	
	</head>	
	<body >
		<a href="#" οnclick="goBack()">返回上级页面</a>
	</body>
</html>

location对象

Containsinformation about current URL,即：该对象包含客户端当前的URL信息

从dom层次图看，location是window对象的成员属性，但实际上location也是由javascriptruntime engine 自动创建的，所以你也可以认为location就是一个javascript对象。

location.reload()重新加载当前文档，相当于刷新。

location.hostname()返回当前URL的主机名

<html>
	<head>
		<title>day_23_3</title>
		<script language="javascript">
			function test(){
				location.reload();	//刷新页面
				//window.alert(location.href+"|| "+location.hostname+"|| "+location.port);
			}	
		</script>
	</head>	
	<body>
		<input type="button" value="刷新页面" οnclick="test()"/>
	</body>
</html>

navigator对象

包含浏览器的各类信息

navigator.appName;返回浏览器的名称

	function show(){
				window.alert(navigator.appName);	
			}

猎豹浏览器运行截图：

奇怪的是我用IE浏览器弹出来的依然是Netscape！

下面是文档列出的navigator对象的属性和方法：

screen对象

Containsinformation about the client’s screen and rendering capabilities ,即：

该对象包含有关客户机显示屏幕的信息。

从dom层次图看，screen是window对象的成员属性，但实际上screen也是由javascriptruntime engine 自动创建的，所以你也可以认为screen就是一个javascript对象。

文档中列出的screen对象的属性：

得到用户屏幕的分辨率:

<html>
	<head>
		<title>day_23_4</title>
		<script language="javascript">
			document.writeln(screen.width+" "+screen.height+"</br>");
			//打印出当前用户电脑屏幕的宽度和高度，即分辨率
			document.writeln(screen.availHeight);//可用高度
		</script>
	</head>	
	<body>
		
	</body>
</html>

event对象

event对象代表时间的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，事件通常与函数结合使用。

从dom层次图看，event对象是window对象的属性，其实在其他dom对象都存在event事件（一种event对象就代表一类事件），理解这一点非常重要。

再说一下之前讲过的事件驱动机制：

关于绑定事件的细节：

直接和某个html控件绑定（前面用的都是）
通过getElementById（）获取元素后，再绑定监听

案例：

<html>
	<head>
		<title>day_23_5</title>		
	</head>	
	<body>
		<input type="button" id="but1" value="刷新"/>
		
		<script language="javascript">
			function test1(){
				document.write("Hello");	
			}
			
			document.getElementById("but1").οnclick=test1;
		</script>
	</body>
</html>

案例：判断用户的每一次输入，如果输入的不是数，就给出警告！并不接受此次输入！

<html>
	<head>
		<title>day_23_5</title>		
		<script language="javascript" type="text/javascript">
			function test(event){
				if(event.keyCode < 48||event.keyCode >57){
					window.alert("您输入的不是数！");
					return false;
				}
			}
			</script>
	</head>	
	<body>
		<input type="text" id="text1" οnkeypress="return test(event)"/></br>
		<input type="button" value="提交"/>
	</body>
</html>