0

我正在使用 Josh Fraser 的向后兼容 window.postMessage() ( http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage )，但遇到了麻烦。

我在一个页面上有 2 个 iframe，两个 iframe 都将不同的数据发送到同一个父页面。换句话说，有 2 个 XD.receivemessage 函数从 2 个不同的 iframe 获取 2 个不同的消息。这是我的代码的缩短版本：

<iframe id="IFRAME1" src="https://www.DOMAIN.com/PAGENAMEFIRST.php"></iframe>
<iframe id="IFRAME2" src="https://www.DOMAIN.com/PAGENAMESECOND.php"></iframe>

<div id="firstTable">
 <table>
  <tr>
   <th>Name</th>
   <th>Address</th>
   <th>ID</th>
  </tr>
  <tr>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
  </tr>
 </table>
</div>

<div id="secondTable">
 <table>
  <tr>
   <th>Email</th>
   <th>Twitter Handle</th>
   <th>ID</th>
  </tr>
  <tr>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
  </tr>
 </table>
</div>

<script type="text/javascript">
$(document).ready(function() {
//FIRST DATA PULL
var encodeUriFirst = encodeURIComponent(document.location.href);
var getMessageFirst = 'https://www.DOMAIN.com/PAGENAMEFIRST.php#' + encodeUriFirst;
$("#IFRAME1").attr('src',getMessageFirst);
XD.receiveMessage(function(getMessageFirst){
    var getDataFirst = getMessageFirst.data; 
    var getDataFirstEach = new Array();
    for(var a=0; a<getDataFirst.length; a++){ 
        getDataFirstEach = getDataFirst.split("~,~");
        $('div#firstTable table td:nth-child(0)').text(getDataFirstEach[0].replace(/[~]/g,""));
    }
}, 'https://www.DOMAIN.com');
//SECOND DATA PULL
var encodeUriSecond = encodeURIComponent(document.location.href);
var getMessageSecond = '//www.DOMAIN.com/PAGENAMESECOND.php#' + encodeUriSecond;
$("#IFRAME2").attr('src',getMessageSecond);
XD.receiveMessage(function(getMessageSecond){
    var getDataSecond = getMessageSecond.data; 
    var getDataSecondEach = new Array();
    for(var a=0; a<getDataFirst.length; a++){ 
        getDataSecondEach = getDataSecond.split("~,~");
        $('div#secondTable table td:nth-child(0)').text(getDataSecondEach[0].replace(/[~]/g,""));
    }
}, 'https://www.DOMAIN.com');
});
</script>

请记住，我已经大大缩减了代码。每个getDataFirst或getDataSecond

它实际上可以从两个 iframe 获取数据（发送/接收两个工作）。我的数据~name~,~address~,~ID~以第一组数据和~email~,~twitter~,~ID~第二组数据的格式出现。

我正在尝试获取数据以填充 2 个表。循环在表中For查找 ID，如果 ID 匹配，则填充与该 ID 关联的其他字段。在某些情况下，来自第一个数据集的 ID 将与来自第二个数据集的 ID 相同。发生这种情况时，for循环会将数据放在两个表中，而不是相应的表中。我想知道为什么会发生这种情况，因为我专门针对内部$('div#firstTable')或$('div#secondTable')输出的表。例如：

$('div#firstTable table td:nth-child(0)').text(getDataFirstEach[0]);

For循环内是否放入getDataFirstEach[0]firstTable 和 secondTable 表？

谁能告诉我为什么？

根据要求，这是完整的 JS：

var encodeUriGifts = encodeURIComponent(document.location.href);
var giftsMessage = '//www.DOMAIN.org/firstpage.php#' + encodeUriGifts;
$("#IFRAME1").attr('src',giftsMessage);
XD.receiveMessage(function(giftsMessage){
    var getDataGifts = giftsMessage.data; 
    var currentRecordGifts = new Array();
    var getGiftsLines = getDataGifts.split("|"); //LINES OF DATA ARE PIPE SEPARATED
    for(var bCnt=0;bCnt < getGiftsLines.length;bCnt++){ 
        var getGiftsEach = getGiftsLines[bCnt].split("`,`"); //EACH ITEM IS SEPARATED BY `,`
        for(var cCnt=0;cCnt < getGiftsEach.length;cCnt++){
            if (getGiftsEach[cCnt]!=="" && getGiftsEach[cCnt]!=="undefined"){
                currentRecordGifts[bCnt] = " <td class='giftamount'>"+getGiftsEach[1]+"</td><td class='giftdate'>"+getGiftsEach[2].replace(/[`]/g,"")+"</td>";
            }
            if (cCnt==2) {
                var thisGiftsID = getGiftsEach[0].replace(/[`]/g,"");
                $('#firstTable table td:contains("'+thisGiftsID+'")').closest('tr').find('td:nth-child(3)').after(currentRecordGifts[bCnt]);
            }
        }
        if (bCnt==0){
            $('#firstTable table th:nth-child(3)').after('<th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Last Gift Amount</th><th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Last Gift Date</th>');
        }
    }
}, 'https://www.DOMAIN.org');

var encodeUriChanges = encodeURIComponent(document.location.href);
var changesMessage = '//www.DOMAIN.org/secondpage.php#' + encodeUriChanges;
$("#IFRAME2").attr('src',changesMessage);
XD.receiveMessage(function(changesMessage){
    var getDataChanges = changesMessage.data; 
    var currentRecordChanges = new Array();
    var getChangesLines = getDataChanges.split("|");
    $('#secondTable table tr td:nth-child(3)').each( function() {
        $('#secondTable table tr td:nth-child(3)').after('<td class="BBListingItem DirectoryListingItem" style="white-space: nowrap;"><ul class="changes"></ul></td>');
    });

    for(var dCnt=0;dCnt < getChangesLines.length;dCnt++){ 
        var getChangesEach = getChangesLines[dCnt].split("`,`");
        for(var eCnt=0;eCnt < getChangesEach.length;eCnt++){
            if (getChangesEach[eCnt]!=="" && getChangesEach[eCnt]!=="undefined"){
                currentRecordChanges[dCnt] = "<li class='change'>"+getChangesEach[2]+" ("+getChangesEach[1].replace(/[`]/g,"")+")</li>";
            }
            if (eCnt==2) {
                var thisChangesID = getChangesEach[0].replace(/[`]/g,"");
                $('#secondTable table td:contains("'+thisChangesID+'")').closest('tr').find('td ul.changes').append(currentRecordChanges[dCnt]);
            }
            if (dCnt==0){
                $('#changesdiv .DirectoryListingTable th:nth-child(3)').after('<th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Change Details</th>');
            }
        }
    }
}, 'https://www.DOMAIN.org');
4

0 回答 0