• 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

  • 相关阅读:
    ActionBarSherlock学习笔记——知识点
    ActionBarSherlock学习笔记——SubMenu
    Android解析xml——pull
    ActionBarSherlock学习笔记——ShareActionProvider
    Listview下拉刷新(顶部刷新)
    ActionBarSherlock学习笔记——SupportActionBar()属性设置
    ActionBarSherlock学习笔记——ActionBar.Tab
    ActionBarSherlock学习笔记——SearchView
    ActionBarSherlock学习笔记——requestWindowFeature
    ActionBarSherlock学习笔记——ActionBar添加View
  • 原文地址:https://www.cnblogs.com/dorra/p/7326078.html
Copyright © 2020-2023  润新知