天天看點

JavaScript第七講:JavaScript中的Windows對象

本節主要講解JavaScript中的Windows對象,浏覽器本身常用對象的使用,BOM。

一、浏覽器本身自己就有一些對象,不用建立就可以使用

wondow :代表目前流量器窗體的

屬性:status 狀态欄

          opener 在子窗體中代表父窗體的對象

           closed

           parent

           top

方法:

          alert()

          confirm()

         setInterval()//頁面動的東西

         clearInterval()

          setTimeout()  //隻執行一次

          clearTimeout()

           open()  //打開一個新窗體的是與原窗體有關系的

window包括子對象document ;   event;  frames//分幀 ;  location

[window].成員:window可以省略 隻有window可以省略

例1

<a href="del.php" target="_blank" rel="external nofollow" οnclick="return confirm('你确定要删除嗎?')">删除</a>

例2

<div id="one" style="position:absolute:left:0; top:0;width:100px;height:100px;">我是廣告</div>

<script>

var x=0;

var y=0;

var xs=10;

var ys=10;

var one=document.getElementById("one");

function move(){

x+=xs;

y+=ys;

if(x>=document.body.clientWidth-one.offsetWidth-20 ||x<=0){

  xs=-1*xs;

}

if(y>=document.body.clientHeight-one.offsetHeight-20 ||y<=0){

 ys=-1*ys;

}

one.style.left=x;

one.style.top=y;

}

var dt=setInterval("move()",100);

one.οnmοuseοver=function(){

 clearInterval(dt);

}

one.οnmοuseοut=function(){

  dt=setInterVal("move()",100);

}

</script>

例3

<body>

<script>

   setTimeout(function(){

           document.bgColor="red";

   },3000;)

 setTimeout(function(){

    document.bgColor="blue";

},6000);

 setTimeout(function(){

    document.bgColor="green";

},9000);

function stop(){

  clearTimeout(two);

}

</script>

<input type="button" οnclick="stop()" value="add">

</body>

例4//也是打開一個新窗體 但是open()方法是與父窗體是有聯系的。而這個是無聯系的

<body>

<a href="1.html" target="_blank" rel="external nofollow" target="_blank">新</a>

</body>

window對象(下)

window.open("url","windowName","windowFeature")

例1 //在父窗體中操作子窗體

<body  οnunlοad="closeit()">

<script>

var subwin=window.open("win.html","_blank","top=300,left=300,width=200,height=200,fullscreen=yes");//傳回的是子窗體

function show(obj){

subwin.document.bgColor=obj.value;

}

function demo(){

window.document.title="qqqqqq";

}

function closeit(){   //如果關閉父窗體那麼子窗體也跟着關閉了

if(subwin.closed){

  subwin.close();

}

}

</script>

<input type="button" οnclick="show(this)" value="red"><br>

<input type="button" οnclick="show(this)" value="green"><br>

<input type="button" οnclick="show(this)" value="yello"><br>

<input type="button" οnclick="show(this)" value="blue"><br>

<input type="button" οnclick="show(this)" value="#ff00ff"><br>

</body>

例2//在子窗體總操作父窗體

在win.html中寫

<body>

<script>

opener.demo();//子窗體調用父窗體裡的方法

function show(obj){

   opener.document.bgColor=obj.value;

}

</script>

<input type="button" οnclick="show(this)" value="red"><br>

<input type="button" οnclick="show(this)" value="green"><br>

<input type="button" οnclick="show(this)" value="yello"><br>

<input type="button" οnclick="show(this)" value="blue"><br>

<input type="button" οnclick="show(this)" value="#ff00ff"><br>

</body>

例3//讓本身的窗體慢慢變大 然後過5秒關閉

<body>

<script>

opener.demo();

function show(obj){

   opener.document.bgColor=obj.value;

}

setInterval(function(){

window.resizeBy(5,5);//相對變大

},100);

setTimeout(function(){

    window.close();

},5000)

</script>

<input type="button" οnclick="show(this)" value="red"><br>

<input type="button" οnclick="show(this)" value="green"><br>

<input type="button" οnclick="show(this)" value="yello"><br>

<input type="button" οnclick="show(this)" value="blue"><br>

<input type="button" οnclick="show(this)" value="#ff00ff"><br>

</body>

例4

<body  οnunlοad="closeit()">

<script>

var subwin=window.open("win.html","_blank","top=300,left=300,width=200,height=200,fullscreen=yes");//傳回的是子窗體

function show(obj){

subwin.document.bgColor=obj.value;

}

function demo(){

window.document.title="qqqqqq";

}

function closeit(){   //如果關閉父窗體那麼子窗體也跟着關閉了

if(subwin.closed){

  subwin.close();

    }

}

var num=0;

var dir=1;

setInterval(function(){

if(num>40||num<0){

dir=-1*dir

}

num+=dir;

var space=""

for(var i=0;i<num;i++){

   space+="";

}

window.status=space+"www.borther.com";

},100)

</script>

<input type="button" οnclick="show(this)" value="red"><br>

<input type="button" οnclick="show(this)" value="green"><br>

<input type="button" οnclick="show(this)" value="yello"><br>

<input type="button" οnclick="show(this)" value="blue"><br>

<input type="button" οnclick="show(this)" value="#ff00ff"><br>

</body>

document

frames

location

history

screen

例5

<frameset   rows="100,*">

    <frame name="top">

        <frameset cols="150,*">

          <frame name="menu" src="menu.html"/>

           <frame name="main"/>

         </frameset>

   </frame>

</frameset>

menu.html

<input  type="button" οnclick="window.document.bgColor='yellow'"  value="改自己的"><br>

<input  type="button" οnclick="window.parent.parent.frames[0].document.bgColor='green'" value="改上面的"><br>

<input type="button" οnclick="window.top.frames.['main'].document.bgColor='blue'" value="改右面的"><br>

知識小結

[window.]成員

document.write();

本身window

open可以彈出子窗體

frames多個窗體

繼續閱讀