js_day23--js DOM编程（history+location+navigator+screen+event对象）

来源：互联网发布：网络安全员证书怎么考编辑：程序博客网时间：2024/05/17 13:40

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="#" onclick="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="刷新页面" onclick="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").onclick=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" onkeypress="return test(event)"/></br><input type="button" value="提交"/></body></html>

1 0