JavaScript学习之一JavaScript浏览器对象模型详解---window对象(上)

1.1    BOM


    BOM提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制。BOM中定义了6种重要的对象:
    •  window对象表示浏览器中打开的窗口;
    • document对象表示浏览器中加载页面的文档对象;
    • location对象包含了浏览器当前的URL信息;
    • navigation对象包含了浏览器本身的信息;
    • screen对象包含了客户端屏幕及渲染能力的信息;
    • history对象包含了浏览器访问网页的历史信息。
    除了window对象之外,其他的5个对象都是window对象的属性,它们的关系如下图:
1.1.1    window对象


    window对象就是JavaScript的Global对象,所以在使用window对象的属性和方法是不需要特别指明。如:alert,实际上完整的调用是window.alert,通常省略了window对象的引用。window对象提供的主要功能有:调整窗口的尺寸和位置、打开新窗口、系统提示框、状态栏控制、定时操作,下面分别对这5个功能详细讲述。
 

 

            1.    调整窗口的尺寸和位置            

方法

用法

说明

window.moveBy

将浏览器窗口移动到指定位置(相对定位)

window.moveBy(dx,dy)

出于安全性和对用户有好的考虑,不允许使用JavaScript脚本将窗口移动到可视区域之外,必须始终保证浏览器窗口在屏幕的可视区域。

window.moveTo

将浏览器窗口移动到指定位置

(绝对定位)

window.moveBy(x,y)

如果指定的坐标(x,y)会使部分或全部窗口置于可视区域之外,那么窗口将停留在最接近屏幕边缘的位置。

window.resizeBy

将浏览器窗口的尺寸改变指定的宽度和高度(相对调整窗口大小)

window.resizeBy(dw,dh)

 

window.resizeTo

将浏览器窗口的尺寸改变指定的宽度和高度(绝对调整窗口大小)

window.resizeTo(w,h)

指定的宽度和高度不能为负数

 

             2.    打开新窗口

                 用法:window.open([url],[target],[options])   

                    参数url:打开新新窗口将要加载的url。如果未指定参数,将默认加载空白页。如:window.open("test.htm");

                    参数target:新打开窗口的定位目标或者名称

                        _self       在当前窗口加载新页面

                        _blank    在新窗口加载新页面

                        _parent   在父窗口加载新页面

                        _top        在顶层窗口加载新页面       

                    参数options:新打开窗口的属性,是由若干个选项组成,选项之间用逗号分隔开,每个选项都包含了选项的名称和值。        

选项

说明

height

窗口的高度,单位像素

width

窗口的宽度,单位像素

left

窗口的左边缘位置

top

窗口的上边缘位置

fullscreen

是否全屏,默认值no

location

是否显示地址栏,默认值yes

menubar

是否显示菜单栏,默认值yes

resizable

是否允许改变窗口大小,默认值yes

scrollbars

是否显示滚动条,默认值yes

status

是否显示状态栏,默认值yes

titlebar

是否显示标题栏,默认值yes

toolbar

是否显示工具条,默认值yes

      window.open简单示例:

  第一个页面代码:

    

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>打开新窗口示例</title>
5 <style type="text/css">
6 #editor
7      {
8 width:300px;
9      }
10 #title, #editor textarea
11      {
12 width:100px;
13 height:80%;
14      }
15 </style>
16 <script type="text/javascript">
17     function newWin() {
18       //打开新窗口
19       var win = window.open("windowtwo.htm", "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=300");
20     }
21   </script>
22 </head>
23 <body>
24 <form action="#">
25 <div id="editor">
26 标题:
27 <input type="text" id="title" /><br />
28 内容:
29 <textarea cols="30" rows="5" id="content"></textarea><br />
30 <input type="button" value="提交" />
31 <input type="button" value="在新窗口中编辑" onclick="newWin()" />
32 </div>
33 </form>
34 </body>
35 </html>

第二个页面代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>新窗口</title>
5 <style type="text/css">
6 #editor
7      {
8 width:300px;
9      }
10 #title, #editor textarea
11      {
12 width:100%;
13 height:80%;
14      }
15 </style>
16 <script type="text/javascript">
17   function newWindow() {
18     //父窗口
19     var parent = window.opener;
20     if (!parent) {
21       return;
22   }
23     //从父窗口中获取标题和内容,填入子窗口的相应位置
24    $("title").value = parent.document.getElementById("title").value;
25   $("content").value = parent.document.getElementById("content").value;
26   }
27
28   function $(id) {
29     return document.getElementById(id);
30   }
31 </script>
32 </head>
33 <body onload="neWindow()">
34 <form action="#">
35 <div id="editor">
36 标题:
37 <input type="text" id="title" />
38 内容:
39 <textarea cols="30" rows="5" id="content"></textarea>
40 <input type="button" value="提交" />
41 <input type="button" value="在新窗口中编辑" onclick="neWin()" />
42 </div>
43 </form>
44 </body>
45 </html>

效果如下:


  今天就写到这里,明天继续系统提示框、状态栏控制、定时操作的讲解

posted @ 2012-02-20 14:00  程序老炮儿清道夫  阅读(3229)  评论(28编辑  收藏  举报