JavaScript實際應用:父子頁面互動

來源:互聯網
上載者:User
子視窗和父視窗互動的內容,基本上無非就是把子視窗的資訊傳遞給父視窗,並且關閉自己等等,或者是父視窗把自己的資訊傳遞給子視窗等等。

1。父視窗傳遞資訊給子視窗

看代碼執行個體:
<script language=javascript>

function outPut()
{
 //擷取父視窗的文本資訊賦值給text
 var text = document.abc.text.value;
 //開啟子視窗,並且把操作控制代碼賦值給win變數,以下所有操作都是針對win對象的
 var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
 //輸出基本資料
 win.document.writeln("<title>輸出結果</title>");
 win.document.writeln("你的資訊是:<p>");
 //輸出從父視窗擷取的資訊
 win.document.writeln(text);
 win.document.close();
 win.focus();
}
</script>

<form name=abc method=post>
<input type=text name=text size=50>
//調用上面的函數
<input type=button value=提交 onClick="outPut()">

</form>

2。子視窗傳遞參數給父視窗

我們對上面的代碼進行改造:

<script language=javascript>

function outPut()
{
 var text = document.abc.text.value;
 var win = window.open("","mywin", "menubar=no,width=400,height=100,resizeable=yes");
 win.document.writeln("<title>輸出結果</title>");
 win.document.writeln("你的資訊是:<p>");
 win.document.writeln(text);
 win.document.writeln("<input type=text name=child value=子視窗資訊>");

 //對子視窗本身操作,使用self對象,對父視窗操作使用opener對象,這是關鍵
 //把子視窗中表單的值回傳給父視窗,取代父視窗表單以前的值,然後關閉子視窗
 win.document.writeln("<input type=button value=關閉自己 onClick='window.opener.abc.text.value=self.child.value;self.close()'>");
 //可以控制關閉父視窗
 win.document.writeln("<input type=button value=關閉父視窗 onClick='window.opener.opener=null;window.opener.close()'>");
 //重新整理父視窗
 win.document.writeln("<input type=button value=重新整理父視窗 onClick='window.opener.location.reload()'>");

 win.document.close();
 win.focus();
}
</script>

<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 onClick="outPut()">

</form>

3。不是同頁面的子視窗和父視窗互動

假設我們涉及到外部程式,比如php、asp等等,那麼我們處理的可能是兩個頁面,比如,上傳功能,我們就是需要開啟一個新頁面,然後再把新頁面中的值傳遞給父頁面。

局部代碼執行個體:

<input type="input" value="" name="input_tag" id = "input_tag" onKeyUp="clearPreTagStyle()" size="40">
<input type="hidden" value="0" name="tagid" id="tagid">
<input type="button" value="標籤" onclick="popUpWindow('tag.php?tag='+escape(document.tryst_form.input_tag.value))">

以上是父視窗的部分代碼,裡面的popUpWindow是封裝好的window.open函數,所以理解面面的tag.php是另外一個頁面就可以,我們需要把當前表單中的值提交給tag.php頁面去處理。

tag.php部分代碼:

查詢標籤結果:
<a href="#" name="tag_1">生活</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML">加入該標籤</a>

<a href="#" name="tag_2">生活秀</a><a href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML">加入該標籤</a>

這個就是我們的子視窗,我們要把tag_1和tag_2返回到子視窗中,雖然他們不是同一個頁面。這裡有個知識點,就是我們如何擷取串連中的值,我們使用innerHTML 屬性:document.tag_2.innerHTML 這個就是我們擷取了tag_2的值“生活秀”,我們也能使用其他方法擷取,比如:document.all.tag_2.innerHTML,或者this.innerHTML就是指本身的連結的值。

訪問父視窗也是使用opener對象來處理:opener.document.tryst_form.input_tag.value,就能夠改變父視窗的值。

基本我目前瞭解就是如此,以後有東西繼續添加。
--------------------------------------------------------------------------------------------------------------------------
Web開發中適當運用一些彈出子視窗有很多好處,可以節省頁面設計代價,獲得好的使用者體驗,在最近項目開發中我遇到了幾個父子視窗的問題,現在整理給大家,希望有所協助.
              
   情景一: 開啟某一子視窗, 子視窗中任一按鈕點擊時候不能彈出新頁面,進行完操作後,關閉該子視窗,重新整理父視窗.        
       
                 1: 頁面A:父視窗,其中有一個開啟子視窗的連結,<a  href="#"onclick="open()">頁面C</a>
                      A中有如下js代碼:

<script language="JavaScript">
   function open()
   {
     window.showModalDialog("頁面B");
   }
</script>

                2: 頁面B,此為中間頁,起過渡作用
                     B 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=gb2312" />
<title>**</title>
</head>

<frameset rows="0,*">
    <frame src="about:blank">
    <frame src="頁面C">
  </frameset><noframes></noframes>
</html>

                 3:頁面C ,要開啟的子視窗.
                    它關閉時候重新整理父視窗很簡單,只要把A中
                    <a  href="#"onclick="open()">頁面C</a>  改為
                    <a  href="頁面A"onclick="open()">頁面C</a>

    情景二:開啟某一需要用到activex控制項子視窗, 子視窗中任一按鈕點擊時候不能彈出新頁面,進行完操作後,關閉該子視窗,重新整理父視窗.  
                  此時候就不能用 window.showModalDialog()事件開啟強制回應對話方塊了,因為activex控制項會報錯,必須用window.open()
 
                  1: 頁面A:父視窗,其中有一個開啟子視窗的連結,<a  href="#"onclick="open()">頁面B</a>
                      A中有如下js代碼.
                  2: 頁面B,要開啟的子視窗,關閉時候觸發window.opener.location.reload();window.close();即可重新整理父視窗並且關閉子視窗.

   
     情景三:開啟某一子視窗,   讓使用者選擇要添加的東東,譬如要添加到文章裡的相片選擇後關閉子視窗,然後選擇的東東出現在父視窗裡.
                    在中,我點擊"添加照片"連結然後彈出子視窗,在子視窗中選擇後點擊"添加照片"按鈕,子視窗自動關閉,並且父視窗"已添加照片:"下面列出了我選擇的照片。

        
      
            

               實現方法:類似情景一需要中間頁面B , 只是子視窗C中點擊"添加按鈕"時觸發的js事件中,除了獲得選中的checkbox的值外,還要把獲得的值回傳給父視窗,傳值回去的代碼如下.
              

<script language="JavaScript">
function open()
 {
   window.open("頁面B",'upload', 'height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no');
 }
</script>

 

window.parent.returnValue="選中的checkbox";
               window.parent.close();

              而父視窗要捕獲此值就要在情景一中所說的open()事件中添加獲得傳回值 

<script language="JavaScript">
  function open()
   {
         var str=window.showModalDialog("頁面C");
         if(str!=null)  
       {              
          picobj.innerHTML+=str; 
          
       }
    }
</script>

               注意這裡的str是擷取的傳回值, 而picobj是你要顯示被選擇東東所放位置的div的id ,這裡是<div id=picobj></div>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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