子視窗與父視窗間通訊

來源:互聯網
上載者:User

父:

function showChild()
    {
        var url = "Test.aspx";
        var width=600;
        var height=500;
        var form = document.all.Form1;
        var retValue = window.showModalDialog(url, "", "dialogWidth:"+width+"px;dialogHeight:"+height+"px;status:yes;directories:yes;scrollbars:yes;Resizable=yes;");
        if( retValue != null )
        {
            document.getElementById("txt_var1").value = retValue[0];
            document.getElementById("txt_var2").value = retValue[1];
            //form.var2.value = retValue[2];
        }
    }

function ReturnValue()
    {
        var txtvalue=document.getElementById("Text1");
        window.returnValue = retArr;
        self.close();
    }

(1) 使用window.open()建立的視窗與父視窗通訊
可以在子視窗頁面中通過window.opener來擷取父視窗對象,擷取之後子視窗便可以對父視窗執行重新整理,傳值等操作。
如:
window.opener.location.reload(); //子視窗重新整理父視窗
window.opener.location.href //擷取父視窗href
window.opener.locaiton.pathname //擷取父視窗路徑名

//重新整理父頁面
window.location.href=window.location.href ; //重新置放父頁面
window.location.reload;

(2) 模態視窗與父視窗通訊
通過使用showModelDialog(),及showModelessDialog()方法建立的子視窗想與父視窗通訊時,不能通過window.opener

來擷取父視窗對象。要實現通訊,必須在建立模態子視窗時向子視窗傳入父視窗對象。

實現方式為:

在父視窗中:

var newWin=window.showModelDialog(url,window,'');
newWin.open();

此時參數window即是父視窗對象

在子視窗中:

需首先擷取父視窗對象,然後才能使用父視窗對象。由於父視窗對象是在建立
子視窗時通過傳入參數的方式傳入的,因此,在子視窗中也只能通過擷取視窗參數的方式擷取父視窗對象。擷取方式如下

var parent=widnow.dialogArguments;
變數parent便是父視窗對象。

例如:

//通過子視窗提交父視窗中的表單:form1,提交後執行查詢操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//重新整理父頁面
var parent=window.dialogArguments;
parent.location.reload();

//從子視窗傳值到父視窗
要實現在模態子視窗中傳值到父視窗,需要使用window.returnValue完成

實現方法如下:

在子視窗中:

//擷取父視窗某欄位值,對該值加一後返回父視窗
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1;

//傳回x值
window.returnValue=x;

在父視窗中:

//擷取來自子視窗的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementById("age").value=newWin;

//在子視窗中設定父視窗的值
在子視窗中向父視窗中傳入值似乎沒有直接設定父視窗中的值來得明了。直接設定父視窗中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據實際情況和已有的實現方式而定,因為如果使用了不切實際的方法不僅降低開發效率,也降低了執行效率,往往也會造成不優雅的實現方式和代碼風格。

子視窗設定父視窗的值使用方法如下:

子視窗中:

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
//設定父視窗中age屬性值
parent.document.getElementById("age").value=x;

 

其他文章

javascript 提交子頁面後關閉並重新整理父視窗實現方案

http://blog.sina.com.cn/s/blog_4aa30443010008gy.html

子視窗建立及父視窗與子視窗之間通訊

http://hi.baidu.com/lin206/blog/item/8d126d54944f7950564e0016.html

showModalDialog/showModelessDialog執行個體,父視窗向子視窗傳遞值,子視窗設定父視窗的值,子視窗關閉的時候傳回值到父視窗.關閉重新整理父視窗
http://www.cnblogs.com/adandelion/archive/2005/10/26/262666.html

相關文章

聯繫我們

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