B0M

最新推荐文章于 2024-09-20 19:11:16 发布

焚膏油以继晷，恒兀兀以穷年

最新推荐文章于 2024-09-20 19:11:16 发布

阅读量791

点赞数

分类专栏： JavaScript/HTML5/CSS3

本文链接：https://blog.csdn.net/linyunping/article/details/51055394

版权

JavaScript/HTML5/CSS3 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

（一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

常见的属性有：

availHeight:返回显示屏幕的高度

availWidth:返回显示屏幕的宽度

colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

height:返回屏幕区域的实际高度

width:返回屏幕区域的实际宽度

BOM(Brower Object Model)浏览器对象模型
1.window
1）window是BOM的核心,它表示整个浏览器窗口，但不必表示其中的内容。在test.html中：
<html>
< head>
< /head>
< frameset rows="100,*">
<frame src="frame.html" name="topFrame"></frame>
<frameset cols="50%,*">
< frame src="frame1.html" name="leftFrame"></frame>
< frame src="frame2.html" name="rightFrame"></frame>
</frameset>
< /frameset>
< /html>

在frame2.html中
<html>
< head>
< /head>
< frameset cols="50%,*">
< frame name="redFrame" src="redFrame.html"></frame>
< frame name="blueFrame" src="blueFrame.html"></frame>
< /frameset>
< /html>
这是一个由3个框架组成的窗口，其中每一个都有自己的window对象表示，存放在frame集合中，在

frame集合中，可由数字（由0开始，从左到右，逐行）或没名字对框架进行索引。如对topFrame的引用

，有以下3种方式：
1 window.frame[0]
2 window.frame["topFrame"]
3 frame[0]

2）window对象的三个实例：
1 top：引用本页面最上层父类窗口。
2 parent：直接包含本页面的父类窗口。如：在redFrame.html中 alert(parent.name) //output：

rightFrame
3 self：引用本页面的window,如：在redFrame.html中 alert(self.name) //output：redFrame

3）窗口操作：
1 moveBy(dx,dy)：移动(dx,dy)个像素。（其中正数向左移，负数向右移）
2 moveTo(x,y)：移动到(x,y)像素。
3 resizeBy(dw,dh)：调整(dw,dy)个像素。（其中正数扩大，负数缩小）
4 resizeTo(w,h)：调整到宽为w个像素，高为h个像素。
5 如果是IE，测量窗口位置window,screenLeft window.screenRight,测量窗口大小

document.body.offsetWidth和document.body.offsetHeight
6 如果是Mozilla,Opera，测量窗口位置window.screenX,window.screenY,测量浏览器视口大小

window.innerWidth,window.innerHeight，测量浏览器窗口大小.window.outerWidth和window.outerHeight

4）导航和打开新窗口
采用window.open()方法进行导航，常用的参数有三个：
第一个就是新窗口的URL，
第二个是新窗口的名称（也可以是专用框架名：_self,_parent,_top,_blank）如：
<script>
< !--
window.open

("http://www.baidu.com/","topframe","height=100,width=100,top=100,left=100,resizable=yes");
-->
< /script>

window.open()方法返回的是对新窗口的引用。该引用还有一个可以指向调用它的窗口的指针opener< script>
< !--
var win = window.open

("http://www.baidu.com/","topframe","height=100,width=100,top=100,left=100,resizable=yes");
alert(win.opener==window);
win.close();
-->
< /script>

5）系统对话框有三个alert(),prompt(),confirm()
1 alert()略
2 prompt()有两个参数，第一个是显示给用户看的文本，第二个就是文本框中的默认文本，返回值是

用户写入文本框中的字符串。 prompt("1+1=？","2");
3 confirm有一个参数，即：显示给用户的文本，有返回值，如果选择的是ok，返回true,如果选择的是

cancel，返回false。 confirm("确定删除？");

6）状态栏
window.status和window.defaultStatus对象来控制状态栏信息。
1 defaultStatus是指第一次载入页面时，使用的默认的状态栏信息。 window.defaultStatus="You are my friend";
2 status可以改变状态栏信息。

7）时间间隔和暂停
1 setTimeout() 时间暂停方法有两个参数一个是要执行的函数，另一个是时间间隔。返回值是一个数

字暂停ID< script type="text/javascript"><!--
function test() {
alert("happy new year"); var i = setTimeout(test,1000);
//clearTimeout(i) 如果要取消暂停就可以调用该方法

< /script>

2 setInterval() 时间间隔方法可以无限次按指定的时间间隔调用方法。 <script type="text/javascript"><!--
var i = 0;
var timeId = null
function test() {
    i ++;
    if(i == 10) {
      clearInterval(timeId); //清除setInt     alert("happy new year"); timeId = setInterval(test,2000);

< /script>

6）history
history对象也是window 的属性之一，它是用来控制浏览器中历史的前进和后退的，它有两套方法：
1）go()方法，有一个参数，即：前进（正数）或后退（负数）的步数。
2）forward()方法和back()方法，前进一步和后退一步。 history.forward();