ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript はブラウザ ウィンドウを操作します

JavaScript はブラウザ ウィンドウを操作します

高洛峰
高洛峰オリジナル
2016-11-26 09:35:171076ブラウズ

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

 
 
 

上記の 4 つの操作に必要な js スクリプトは次のとおりです:
[javascript]
/**
* 新しいウィンドウを開きます (script1.js)
*/
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0; i<) ;document.links.length;i++){
newWindow(){
var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350 ,高さ=260");
//幅と高さのパラメータに注意してください。カンマの間にスペースを入れることはできません。スペースがある場合、スクリプトは
// 一部のブラウザでは無効になる可能性があります。
return false
}
[javascript]
< pre class="javascript" name="code" >/**
*複数のウィンドウを開く (script2.js) 画面上のコントロールをクリックするたびに、作成されたスクリプトによって異なるウィンドウが開きます
*/
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i if(document.links[ i].className="newWin"){
document.links[i]
var imgName="images/pixel"+i+".jpg";
var winName="window "+i;
var catWindow=window.open(imgName, winName,"width=350,height=260");
}
}

[javascript]
/**
* ウィンドウを閉じる(script3.js)
*/
var newWindow=null ;
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i document.links[i].onclick=chgWindowState; false を返します。 }

function chgWindowState(){
if(this.id=="closeWin"){
if(windowOpen()){
newWindow.close()
}else{
alert("ウィンドウは ' ");
newWindow=window.open("", "newWin","toolbar,location=yes,width=300,height=200");
window.onload=newWinLinks; function newWinLinks(){
for(var i=0;i document.links[i].onclick=chgWindowState;
}
}

function windowOpen(){
if( newWindow&&!newWindow.closed){
関数ウィンドウを開く ( ) 。}

function chgWindowState(){
if(this.id=="closeWin"){
if(windowOpen()){
newWindow.close()
}else{
alert("ウィンドウは ' 「);
, 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;
}

オープナーと親の比較:
window.opener は実際にはこのウィンドウの親ウィンドウを指します。たとえば、parWin.js がポップアップします。 childWin.jsp から window.open を経由すると、childWin.js .opener のウィンドウが parWin.jsp を参照するため、childWin.js では、window.opener を使用して parWin.jsp 内の任意のメソッドを呼び出し、parWin 間の対話を実現できます。 jsp と childWin.jsp です。
window.parent は、iframe ページによって呼び出される親ページ オブジェクトです。たとえば、parWin ページが iframe または Frame を使用して childWin ページを呼び出す場合、parWin ページが配置されているウィンドウが childWin ページの親になります。