首頁 >web前端 >js教程 >JavaScript操作瀏覽器視窗

JavaScript操作瀏覽器視窗

高洛峰
高洛峰原創
2016-11-26 09:35:171181瀏覽

 窗口是Web浏览器中最重要的界面元素,JavaScript提供了许多操作窗口的工具,JavaScript处理窗口的方式与处理框架很相似(因为框架是位于总浏览器窗口中的文档窗口)。
      今天学习了如何使用JavaScript打开关闭,更新和定位窗口,如何使用JavaScript将信息写入窗口,从而可以在运行时构建网页。
      (一)打开新窗口
[html]
 
 

 
    Open a Window 
     
   
   
   
    

The Master of the House

 
    

Click on his name to behold he who must be adored

 
    

   
 

(二)打开多个窗口
[html]
 

 
    About that Cat 
       
 
 
   

More pictures of our cat

 
   

 
 

(三)关闭窗口
[html]
 

 
    Window Test 
       
 
 
   
 
身體> 
 

(四)把窗口放在指定位置
[html]
 

 
    Window Test 
       
 
 
   
 
       

Let's play with windows!

 
       

 
                                                                   

 
   
 
身體> 
 

以上四個作業所需的js腳本分別為下列scripti:
[javascript]
/**
 * 開啟新視窗(script1.js)
 */ 
window.onload=newWinLinks; 
 
function newWinLinks(){
 
function newWinLinks(){ • var). i        if(document.links[i].className=="newWin"){ 
        } 
    } 

 
function newWindow(){ 
    var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260"); 
   逗號之間不能有任何空格,如果有空格,那麼腳本 
    //可能在某些瀏覽器中無效, 
    return false; 

[javascript]

javascript" name="code"> /**<br> *開啟多個視窗(script2.js) 在每次點擊螢幕上的一個控制項時,透過建立的腳本代開不同的視窗<br> */ <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ <br>    for(var i=0;i<document.links .classname="newWin"></document.links>            document.links[i].onclick=newWindows; <br>     <br>    for(var i=1;i        var imgName="images/pixel"+i+".jpg"; <br>        var winName="window"+i; <br>        <br> } <br> <br>[javascript]<br>/**<br> * 關閉視窗(script3.js)<br> */ <br>var newWindow=null; <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ p. ;i++){ <br>        document.links[i].onclick=chgWindowState; <br>    } <br>} <br> <br>        return true; <br>    } <br>    return false; <br>} <br> <br>function chgWindowState(){ <br>    if(this.id=="closeWin"){ <br>        if(windowOpen()){ 🠎dow         }else{ <br>            alert("The window isn't open") ; <br>        } <br>    } <br>    } <br>    } <br>    if(this.id=="openWin"){ <br>    The window is already open!"); <br>        }else{ <br>            newWindow=window.open( "", "newWin","toolbar,location=yes,width=300,height=200"); <br>        } <br>    } <br>   newWindow =null; <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ <br>    for(var i=0;i<documeng.links.length></documeng.links.length>    } <br>} <br> <br>function windowOpen(){ <br>    if(newWindow&&!newWindow.closed){ <br>     } <br> <br>function chgWindowState(){ <br>    if(this.id=="closeWin"){ <br>       <br>        }else{ <br>            alert("The window isn't open "); <br>        } <br>        return false; <br>    } <br>   <br>    if(this.id.indexOf("bottom")>-1){ <br>        topPos=screen.availHeight-200 ; <br>    } <br>    if(this.id.indexOf("Right")>-1){ <br>         <br>        newWindow.moveTo(leftPos,topPos); <br>    }else{ <br>        }else{ <br>        newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+、 return false; <br>} <br> <br>opener和parent比較:<br>window.opener其實是指本窗口的父窗口,比如,parWin.js透過window.open彈出了childWin.jsp,那麼在Win.js裡面的window.openjser就是指parWin.jsp,所以在childWin.js裡面完全可以用window.opener呼叫任何一個parWin.jsp裡面的方法,實作parWin.jsp和childWin.jsp的互動。 <br>window.parent 是iframe頁面呼叫父頁面對象,例如一個parWin頁面利用iframe或frame呼叫childWin頁面,那麼parWin頁面所在視窗就是childWin頁面的parent。 <br><br><br><br>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn