将脚本部分添加到子窗口Javascript

时间:2012-11-07 00:37:13

标签: javascript jquery events onclick childwindow

我正在尝试创建一个弹出的窗口,显示一个地址表,然后让用户单击其中一个地址并将该信息发送回父级。我的功能目前看起来像(其他部分是我遇到麻烦的地方):

 function ups_address_validation(address1, address2, city, state, zip)
     {
         var address = new Object;
            address.address1 = address1.value;
            address.address2 = address2.value;
            address.city = city.value;
            address.state = state.value;
            address.zip = zip.value;
            var data = {address: address};
            var info = ups_api('validate_address', data);
            if (info.hasOwnProperty('ValidAddressIndicator'))
            {
                $("#" + address1.field).val(info.Candidate.AddressKeyFormat.AddressLine[0]);
                $("#" + address2.field).val(info.Candidate.AddressKeyFormat.AddressLine[1]);
                $("#" + city.field).val(info.Candidate.AddressKeyFormat.PoliticalDivision2);
                $("#" + state.field).val(info.Candidate.AddressKeyFormat.PoliticalDivision1);
                $("#" + zip.field).val(info.Candidate.AddressKeyFormat.PostcodePrimaryLow + '-' + info.Candidate.AddressKeyFormat.PostcodeExtendedLow);
            }
            else
            {
                var candidates = info.Candidate;
                var popup = window.open('', 'Addresses', 'width=850, height=350, scrollbars=1' );
                var html = "<head>" +
                            "<link rel='stylesheet' type='text/css' href='css/style.css' media='screen'></link>" +
                            "<link type='text/css' href='/public/utilities/jquery/css/smoothness/jquery-ui-1.8.22.custom.css' rel='stylesheet'></link>" +
                            "<script type='text/javascript' src='/public/utilities/jquery/js/jquery-1.7.2.min.js'></script>" +  
                            "<script type='text/javascript'> $(document).ready(function(){$('td').click(function(){alert('clicked');})});});</script>" +
                            "</head><body>" +
                            "<div class='wrapper' style='width: 800; background-color: #fff'><div class='content' style='width: 800'>" +
                            "<div class='module_header'>Confirmed Addresses</div><table class='lookup_table' style='width: 800'><tr><th>Address1</th><th>Address2</th><th>City</th><th>State</th><th>Zip</th></tr>";
                var i = 0;
                for (var i in candidates)
                {
                    var row = (i %2)? 'alt': '';
                    html += "<tr class='"+row+"'>";
                    if (info.Candidate[i].AddressKeyFormat.AddressLine instanceof Object)
                        {
                            for (var p in info.Candidate[i].AddressKeyFormat.AddressLine)
                            {
                                html += "<td>" + info.Candidate[i].AddressKeyFormat.AddressLine[p] + "</td>";
                            }
                        }
                    else
                        {
                            html+= "<td>" + info.Candidate[i].AddressKeyFormat.AddressLine + "</td><td></td>";
                        }
                    html +=     "<td>" +
                                    info.Candidate[i].AddressKeyFormat.PoliticalDivision2 +
                                "</td><td>" +
                                    info.Candidate[i].AddressKeyFormat.PoliticalDivision1 +
                                "</td><td>" +
                                    info.Candidate[i].AddressKeyFormat.PostcodePrimaryLow + "-" + info.Candidate[i].AddressKeyFormat.PostcodeExtendedLow +
                                "</td></tr>";
                }
                html += "</table><div class='module_header'>Submitted Address</div><table class='lookup_table' style='width: 800'><tr><th>Address1</th><th>Address2</th><th>City</th><th>State</th><th>Zip</th></tr>";
                html += "<tr><td>" + address1.value + "</td><td>" + address2.value + "</td><td>" + city.value + "</td><td>" + state.value + "</td><td>" + zip.value + "</td><tr></table>";
                html += "</div></div></body>";
                popup.document.write(html);
                $(popup.document).ready(function(){
                    $('td').click(function(){alert('clicked');});
                });
            }


     }

我想在每个表行上添加一个onClick事件,该函数将该数据发送回父窗口。但是,我尝试了以下内容:

$(popup.document).ready(function(){ $('td').click(function(){ alert('clicked');});});

或使用中的脚本部分

如何将onclick事件发送到我的子窗口标记(通过将其传递给子窗口或从父窗口设置),以便我可以从表中返回信息。

1 个答案:

答案 0 :(得分:0)

您可以在父窗口中执行一个功能,并从新打开的窗口发送带有该功能的参数。

父窗口将是window.opener,父窗口中的函数将是全局的,即在窗口范围内,您可以使用window.opener.myFunction(parameters, from, myPopup);

从打开的窗口调用该函数

这意味着你可以在新打开的窗口中编写onclick事件处理程序,然后单击调用父窗口中的一个函数,将所选数据作为参数传递给父窗口中的函数。

这是DEMONSTRATION