DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JavaScript—window對象使用示例
JavaScript—window對象使用示例
編輯:JavaScript綜合知識     

 window對象是JavaScript浏覽器對象模型中的頂層對象,其包含多個常用方法和屬性,下面為大家介紹下window對象的使用

window對象是JavaScript浏覽器對象模型中的頂層對象,包含多個常用方法和屬性:    1 打開新窗口  代碼如下: window.open(pageURL,name,parameters)    其中:    pageURL為子窗口路徑    name為子窗口句柄    parameters為窗口參數(各參數用逗號分隔)    如:  代碼如下: window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');    2 打開模式窗口   代碼如下: window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");    3 關閉窗口,不彈出提示框    如果網頁不是通過腳本程序打開的(window.open()),調用window.close()腳本關閉窗口前,必須先將window.opener對象置為null,否則浏覽器(IE7、IE8)會彈出一個確定關閉的對話框。   代碼如下: <script language="javaScript">  function closeWindow()  {   window.opener = null;   window.open('', '_self', '');   window.close();  }  </script>  <input type='button' value='關閉窗口' onClick="closeWindow()">  或  <input type="button" value="關閉窗口" onClick="window.opener = null;  window.open('', '_self', '');window.close()">    對於關閉框架窗口  代碼如下: <script language="javaScript">  function closeWindow()  {  window.opener = null;  window.open('', '_top', '');  window.parent.close();  }  </script>    4 location對象使用  代碼如下: window.location.reload();//刷新當前頁  window.location.href="http://www.cnblogs.com/zhouhb/"; //載入其他頁面    5 history對象使用  代碼如下: window.history.go(1); //前進  window.history.go(-1); //後退    6 子窗體向父窗體傳值    6.1 簡單方法    (1)在父窗體中打開子窗體  代碼如下: var str=window.showModalDialog("s.html");  if(str!=null)  {  var v=document.getElementById("v");  v.value+=str;  }    (2)子窗體代碼  代碼如下: var v=document.getElementById("v");  window.parent.returnValue=v.value;    window.close();    另外,對於showModalDialog打開的窗口,也可以通過dialogArguments傳值:    父窗口代碼:  代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>無標題文檔</title>  <script type="text/javascript">  function opendialog()  {  window.showModalDialog("child.html",window,"win","resable=false");//這裡用window對象作為參數傳遞  }  </script>  </head>    <body>  <form>  <input type="text" id="name" />  <input type="button" id="open" value="open" onclick="opendialog()"/>  </form>  </body>  </html>    子窗口代碼:  代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>無標題文檔</title>  <script type="text/javascript">  function updateParent()  {  var pwin=window.dialogArguments;//子窗口獲取傳遞的參數  if(pwin!=undefined)  {  pwin.document.getElementById("name").value=document.getElementById("name").value;  }  }  </script>  </head>    <body>  <form>  <input type="text" id="name" />  <input type="button" id="update" value="更新父窗口" onclick="updateParent()"/>  </form>  </body>  </html>    對於showModalDialog打開的窗口,也可以通過window.returnValue傳值:    主窗口:   代碼如下: <SCRIPT type="text/javascript">  function openWindow(){  var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");  alert("您的銀行卡密碼是"+bankCard+"n");  }  </SCRIPT>    (2)打開的窗口  代碼如下: <HEAD>  <META http-equiv="Content-Type" content="text/html; charset=gb2312">  <TITLE>窗口練習</TITLE>  <SCRIPT type="text/javascript" language="javascript">  function closeWindow(){  window.returnValue=document.myform.cardPass.value;  window.close();  }  </SCRIPT>  </HEAD>  <BODY>  <FORM name="myform" action="" method="post">  賬戶信息:<BR>  請妥善保存你的賬戶信息,以免發生損失<BR>  帳號:<INPUT name="cardNum" type="text" size="40"><BR>  密碼:<INPUT name="cardPass" type="password" size="45"><BR>  <INPUT type="button" name="btn" value="確認" onClick="closeWindow()">  </FORM>  </BODY>    6.2 更加詳細的介紹    眾所周知window.open() 函數可以用來打開一個新窗口,那麼如何在子窗體中向父窗體傳值呢,其實通過window.opener即可獲取父窗體的引用。  如我們新建窗體FatherPage.htm:   代碼如下: <script type="text/javascript">  function OpenChildWindow()  {  window.open('ChildPage.htm');  }  </script>  <input type="text" id="txtInput" />  <input type="button" value="OpenChild" onclick="OpenChildWindow()" />    然後在ChildPage.htm中即可通過window.opener來訪問父窗體中的元素:  代碼如下: <script type="text/javascript">  function SetValue()  {  window.opener.document.getElementById('txtInput').value  =document.getElementById('txtInput').value;  window.close();  }  </script>  <input type="text" id="txtInput" />  <input type="button" value="SetFather" onclick="SetValue()" />    其實在打開子窗體的同時,我們也可以對子窗體的元素進行賦值,因為window.open函數同樣會返回一個子窗體的引用,因此FatherPage.htm可以修改為:  代碼如下: <script type="text/javascript">  function OpenChildWindow()  {  var child = window.open('ChildPage.htm');  child.document.getElementById('txtInput').value  =document.getElementById('txtInput').value;  }  </script>  <input type="text" id="txtInput" />  <input type="button" value="OpenChild" onclick="OpenChildWindow()" />    通過判斷子窗體的引用是否為空,我們還可以控制使其只能打開一個子窗體:  代碼如下: <script type="text/javascript">  var child  function OpenChildWindow()  {  if(!child)  child = window.open('ChildPage.htm');  child.document.getElementById('txtInput').value  =document.getElementById('txtInput').value;  }  </script>  <input type="text" id="txtInput" />  <input type="button" value="OpenChild" onclick="OpenChildWindow()" />    光這樣還不夠,當關閉子窗體時還必須對父窗體的child變量進行清空,否則打開子窗體後再關閉就無法再重新打開了:  代碼如下: <body onunload="Unload()">  <script type="text/javascript">  function SetValue()  {  window.opener.document.getElementById('txtInput').value  =document.getElementById('txtInput').value;  window.close();  }  function Unload()  {  window.opener.child=null;  }  </script>  <input type="text" id="txtInput" />  <input type="button" value="SetFather" onclick="SetValue()" />  </body> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved