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  程序老炮儿清道夫  阅读(3253)  评论(28)  编辑  收藏  举报