Heim  >  Artikel  >  Web-Frontend  >  JavaScript manipuliert Browserfenster

JavaScript manipuliert Browserfenster

高洛峰
高洛峰Original
2016-11-26 09:35:171076Durchsuche

 窗口是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 
       
 
 
   

 
 
 

Die für die oben genannten vier Vorgänge erforderlichen js-Skripte lauten wie folgt:
[javascript]
/**
* Neues Fenster öffnen (script1.js)
*/
window.onload=newWinLinks;

function newWinLinks (){
for(var i=0;i if(document.links[i].className=="newWin"){
Links [i].onclick=newWindow;
} }
}
}

function newWindow(){
var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260");
//Beachten Sie, dass zwischen den Kommas in den Parametern width und height keine Leerzeichen stehen dürfen 🎜> / / ist in einigen Browsern möglicherweise nicht gültig,
gibt false zurück;
}
[javascript]

/**
*Mehrere Fenster öffnen (script2.js) Jedes Mal, wenn auf ein Steuerelement auf dem Bildschirm geklickt wird, werden durch das erstellte Skript verschiedene Fenster geöffnet
*/
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i if( document.links[i].className="newWin"){
             document.links[i].onclick=newWindows 🎜> for(var i=1;i<5;i++){
var imgName= "images/pixel"+i+.jpg";
var winName="window"+i; 🎜> }
}

[javascript]
/**
* Fenster schließen (script3.js)
*/
var newWindow=null;
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i       document.links[i].onclick=chgWindowState; 🎜> }
return false
}

function chgWindowState(){
if(this.id=="closeWin"){
if(windowOpen()){
newWindow.close(
}else{
warning("Das Fenster ist nicht geöffnet");
}
}
if(this.id=="openWin" ){
if(windowOpen() ){
warning("Das Fenster ist bereits geöffnet!");
}else{
newWindow=window.open("", "newWin", toolbar,location=yes,width=300, height=200");
} }
}
return false;
}
[javascript]
/**
* Platzieren Sie das Fenster an einer bestimmten Position (script4.js). Manchmal möchten Sie ein Fenster an einer bestimmten Position auf dem Bildschirm öffnen. In diesem Beispiel kann der Benutzer ein kleines Fenster in einer der vier Ecken öffnen des Bildschirms.
* /
var newWindow=null;
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i document.links[i] .onclick=chgWindowState;
}
}

function windowOpen(){
if(newWindow&&!newWindow.closed){ ​​​​
return true ; > return false;

 
function chgWindowState(){ 
    if(this.id=="closeWin"){ 
        if(windowOpen()){ 
            newWindow.close(); 
        }else{ 
            warning("Das Fenster ist nicht geöffnet"); 
        } 
        return false; 
    } 
    var topPos=0; 
    var leftPos=0; 
     
    if(this.id.indexOf("bottom")>-1){ 
        topPos=screen.availHeight-200; 
    } 
    if(this.id.indexOf("Right")>-1){ 
        leftPos=screen.availWidth-300; 
    } 
    if(windowOpen()){ 
        newWindow.moveTo(leftPos,topPos); 
    }else{ 
        newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+",top="+topPos) ; 
    } 
    return false; 🎜 Verwenden Sie childWin.js Öffnen Sie die Datei „window.opener“ und „parWin.jsp“ oder „childWin.js“ oder „window.opener“. .jsp和childWin.jsp的交互.
window.parent是iframe页面调用父页面对象, 比如一个parWin页面利用iframe或frame调用childWin页面, 那么parWin页面所在窗口就是childWin页面的parent。