你的位置:首页 > Java教程

[Java教程]Js浏览器对象


Js浏览器对象——window对象

1.window对象:

(1)window对象是BOM的核心,window对象指当前的浏览器窗口。

(2)所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员。

(3)全局变量是window对象的属性。

(4)全局函数是window对象的方法。

(5)甚至HTML DOM的document也是window对象的属性之一。

例:window.document.write("hello");//window可省略。

 

2.window尺寸:

(1)window.innerHeight:浏览器窗口的内部高度。

(2)window.innerWidth:浏览器窗口的内部宽度。

例:document.write("宽度:"+window.innerWidth+",高度"+window.innerHeight);

 

3.window方法:

(1)window.open():打开新窗口。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:

       <button id="btn" onClick="btnClick()">按钮</button>

       <script>

              function btnClick(){

                      window.open("XXXX.html","windowname","height=200,width=100,top=20,left=40,toolbar=no,menubar=no");

             }

      </script>

结果:界面有一个按钮,点击该按钮页面跳转到xxxx.html。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

(2)window.close():关闭当前窗口。

~~~~~~~~~~~~~~~~~~~

例:

       <button id="btn" onClick="btnClick()">按钮</button>

       <script>

              function btnClick(){

                      window.close();

             }

      </script>

结果:界面出现一按钮,点击该按钮,该界面就关闭了。

~~~~~~~~~~~~~~~~~~~~~~

-------------------------------------------------

JS的浏览器对象—计时器

1.计时事件:

      通过使用JavaScript,做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

2.计时方法:

(1)setInterval():间隔指定的毫秒数后不停地执行指定的代码。

       clearInterval()方法用于停止setInterval()方法执行的函数代码。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:

  <button id="btn" onClick="stopTime()">按钮</button>

  <p id="ptime"></p>

  <script>

             var mytime=setInterval(function(){getTime();},1000);

             function getTime(){

                   var d=new Date();

                   var t=d.toLocaleTimeString();

                   document.getElementById("ptime").innerHTML=t;

             }

             function stopTime(){

                   clearInterval(mytime);

            }

  </script>

结果:

 

时间是动态显示的,当按下按钮时时间就停止了。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

(2)setTimeout():暂停指定的毫秒数后执行指定的代码。

       clearTimeout()方法用于停止执行setTimeout()方法的函数代码。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:

    <button onclick="myWin()">按钮</button>

     <script>

                 var win;

                 function myWin(){

                           win=setTimeout(function(){alert("hello");},3000);

                }

     </script>

结果:界面出现按钮,点击按钮三秒后弹出“hello”。

即:与(1)区别:没有显示出动态持续的效果。

例(利用调用自身也可有动态效果):

     <body onload="myWin()">

    <button onclick="stopTime()" id="btn">按钮</button>

     <script>

                 var win;

                 function myWin(){

                          alert("hello");

                           win=setTimeout(function(){myWin();},3000);

                }

                function stopTime(){

                         clearTimeout(win);

               }

     </script>

     </body>

结果:界面出现一个按钮,并每隔三秒都会弹出“hello”,当点击按钮时就不会再弹出了。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

---------------------------------------------------------------

JS浏览器—history对象

1.history对象:

     window.history对象包含浏览器的历史(URL)的集合。

2.history方法:

(1)history.back():与在浏览器点击后退按钮相同。

(2)history.forward():与在浏览器中点击按钮向前相同。

(3)history.do():进入历史中的某个页面。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~···

例:

    obindex.html

           <button id="btn" onclick="goceshi()">按钮</button>

           <script>

                      function goceshi(){

                               history.back();

                      }

          </script>

   ceshi.html

         <a href="obindex.html">跳转到obindex.html</a>

         <button id="btn" onclick="goob()">按钮</button>

         <script>

                  function goob(){

                        history.forward();

                 }

        </script>

结果:界面出现跳转到obindex.html和一个按钮

        点击链接进入obindex.html页面中,该页面有一个按钮

        点击该按钮回退到ceshi.html页面。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例2:

       obindex.html

    <form>

           <input type="text" id="username">

           <button id="btn" onclick="safe()">按钮</button>

    </form>

     <script>

          function safe(){

               var name=document.getElementById("username").value;

               if(name=="hello"){

                    history.go(-1);

               }else{

                   alert("输入的用户民不正确");

                 }

          }

     </script>

   ceshi.html

         <a href="obindex.html">跳转</a>

结果:

界面出现

 

点击后出现

 

 输入hello再跳转到ceshi.html,若不是弹出提示框“"输入的用户民不正确"。

~~~~~~~~~~~~~~~~~~~~

----------------------------------

JS浏览器对象-screen对象

1.screen对象:

    window.screen对象包含有关用户屏幕的信息。

2.属性:

screen.availWidth:可用的屏幕宽度。

screen.availHeight:可用的屏幕高度。

screen.width:屏幕宽度。

screen.height:屏幕高度。

~~~~~~~~~~~~~~~~~

例:

document.write("可用高度:"+screen.availHeight+"可用宽度:"+screen.availWidth);

 

document.write("高度:"+screen.height+"宽度:"+screen.width);