zoukankan      html  css  js  c++  java
  • JavaScript之BOM浏览器对象模型-window

    window对象举例

            /*window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:
              document:返回该窗口内装载的HTML文档
              location:返回该窗口装载的HTML文档的URL
              navigator:返回浏览当前页面的浏览器,包含了一系列浏览器属性,包括名称、版本号和平台等
              screen:返回当前浏览器屏蔽对象
              history:返回该浏览窗口的历史
    
              提示:这些属性都属于window对象的子对象,每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
    
              window对象的常用方法:
              (1)alert()、confirm()、prompt():分别用于弹出警告窗口、确认对话框和提示输入对话框
              (2)close():关闭窗口
              (3)moveBy()、moveTo():移动窗口
              (4)resizeBy()、resizeTo():重设窗口大小
              (5)scrollBy()、scrollTo():滚动当前窗口的HTML文档
              (6)open():打开一个新的浏览器窗口加载新的URL所指向的地址,并可指定一系列的属性,包括隐藏菜单等
              (7)setInterval()、clearInterval():设置、删除定时器
              更多请参考: http://www.w3school.com.cn/jsref/dom_obj_window.asp
              Firefox和Chrome不支持其中(3)、(4)方法。除此之外,可能还有很多存在浏览器兼容性问题。
            */
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>BOM浏览器对象模型(Brower Object Model)--window对象</title>
            <script type="text/javascript">
    
                function testConfirm(){
                    var answer=window.confirm("是否退出?");
                    if(answer){
                        window.alert("拜拜");
                        window.close();//关闭浏览器;
                    }else{
                        window.alert(":-)");
                    }
                }
    
                function testPrompt(){
                    var password=window.prompt("请输入密码", "123abc");
                    alert(password);//测试prompt返回的是什么--返回的是输入的东西
                    alert(typeof(password));//测试看返回值的数据类型
                }
    
                function testMoveBy(){
                    window.moveBy(50,50);
                }
    
                function testMoveTo(){
                    window.moveTo(250,250);
                }
    
                function testResizeBy(){
                    window.resizeBy(50,50);
                }
    
                function testResizeTo(){
                    window.resizeTo(350,350);
                }
    
                function testScrollBy(){
                    window.scrollBy(50,50);
                }
    
                function testScrollTo(){
                    window.scrollTo(350,350);
                }
    
                var count=0;
                function showTime(){
                    var date=new Date();
                    var hour=date.getHours();
                    if(hour<10){
                        hour="0"+hour;
                    }
                    var minutes=date.getMinutes();
                    if(minutes<10){
                        minutes="0"+minutes;
                    }
                    var seconds=date.getSeconds();
                    if(seconds<10){
                        seconds="0"+seconds;
                    }
                    count++;
                    if(count==10){//实现定时器计时10秒就停止
                        window.clearInterval(t);
                    }
                    document.getElementById("display").innerHTML=hour+":"+minutes+":"+seconds;
                }
                var t=window.setInterval("showTime()", 1000);
            </script>
        </head>
        <body>
            <input type="button" value="confirm" onclick="testConfirm()"><br>
            <input type="button" value="prompt" onclick="testPrompt()"><br>
            <input type="button" value="moveBy" onclick="testMoveBy()"><br>
            <input type="button" value="moveTo" onclick="testMoveTo()"><br>
            <input type="button" value="resizeBy" onclick="testResizeBy()"><br>
            <input type="button" value="resizeTo" onclick="testResizeTo()"><br>
            <input type="button" value="scrollBy" onclick="testScrollBy()"><br>
            <input type="button" value="scrollTo" onclick="testScrollTo()"><br>
            <div id="display"></div>
        </body>
    </html>

     运行结果(定时器计时10秒之后会自动停止):

    打开新窗口(window.open)

    open() 方法可以查找一个已经存在或者新建的浏览器窗口。

    语法:

    window.open([URL], [窗口名称], [参数字符串])

    参数说明:

    URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
    窗口名称:可选参数,被打开窗口的名称。
        1.该名称由字母、数字和下划线字符组成。
        2."_top"、"_blank"、"_self"具有特殊意义的名称。
           _blank:在新窗口显示目标网页
           _self:在当前窗口显示目标网页
           _top:框架网页中在上部窗口中显示目标网页
        3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
       4.name 不能包含有空格。
    参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

    参数表:

     例1:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>window.open</title>
    <script type="text/javascript">
      function Wopen(){
        window.open('http://www.baidu.com','_blank','height=600,width=400,top=100,left=0');
      } 
    </script>
    </head>
    <body>
        <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / >
    </body>
    </html>

    例2:

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <title> new document </title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
      <script type="text/javascript">
        function openWindow(){
          var message=confirm("是否打开窗口?");
          if(message){
              // 新窗口打开时弹出确认框,是否打开
              var net=prompt("请输入你想要打开的网址","http://www.baidu.com");
              // 通过输入对话框,确定打开的网址,默认为 http://www.baidu.com/
              window.open(net,'_self','width=400px,height=500px,menubar=no,toolbar=no');
              //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
          }
          else{
              alert("不做任何处理");
          }
        }
      </script> 
     </head> 
     <body> 
          <input type="button" value="新窗口打开网站" onclick="openWindow()" /> 
     </body>
    </html>

    关闭窗口(window.close)

    close()关闭窗口

    用法:

    window.close();   //关闭本窗口

    <窗口对象>.close();   //关闭指定的窗口

    例如:关闭新建的窗口。

    <script type="text/javascript">
       var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中
       mywin.close();
    </script>

    注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。

     更多用法参考:http://www.w3school.com.cn/jsref/dom_obj_window.asp

  • 相关阅读:
    LeetCode 40. 组合总和 II(Combination Sum II)
    LeetCode 129. 求根到叶子节点数字之和(Sum Root to Leaf Numbers)
    LeetCode 60. 第k个排列(Permutation Sequence)
    LeetCode 47. 全排列 II(Permutations II)
    LeetCode 46. 全排列(Permutations)
    LeetCode 93. 复原IP地址(Restore IP Addresses)
    LeetCode 98. 验证二叉搜索树(Validate Binary Search Tree)
    LeetCode 59. 螺旋矩阵 II(Spiral Matrix II)
    一重指针和二重指针
    指针的意义
  • 原文地址:https://www.cnblogs.com/dorra/p/7326078.html
Copyright © 2011-2022 走看看