zoukankan      html  css  js  c++  java
  • 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>

    效果如下:


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

  • 相关阅读:
    Identity Server4学习系列三
    C# 多线程九之Timer类
    Identity Server4学习系列二之令牌(Token)的概念
    Identity Server4学习系列一
    C# 多线程八之并行Linq(ParallelEnumerable)
    使用Resourcehacker去除winrar的弹窗广告
    remote: Coding 提示: Authentication failed问题解决
    使用Python读取照片的GPS信息
    mongoose删除mongodb某个库的所有collection
    mysql数据库查询占用空间
  • 原文地址:https://www.cnblogs.com/limits/p/2359375.html
Copyright © 2011-2022 走看看