首頁 > 開發者 > JavaScript

JavaScript學習筆記（四）—window對象使用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
downloads window window extension window opendatabase window s window filereader window rtcpeerconnection microsoft window update window 7
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More