从 iframe 访问父 select2 控件元素并设置其值答案

【问题标题】：Access parent select2 control element from iframe and set its value从 iframe 访问父 select2 控件元素并设置其值
【发布时间】：2015-01-17 21:55:13
【问题描述】：

我有一个像http://localhost/index.php?action=test 这样加载的基础文档。该文档有一个按钮，可以打开一个带有 iframe 的 div，该 iframe 从同一域 http://localhost/index.php?action=search 加载另一个文档。现在我有了结果，点击 iframe 中的链接，我需要访问父级中的一个字段（这是一个 select2 控件）并设置值。

生成的 html 如下所示：

<tbody>
 <tr>
  <td class="fldlabel">
   <div><label for="header[CTRYID]">Country</label></div>
  </td>
  <td>
   <input tabindex="-1" id="header-CTRYID" data-label="Country" name="header[CTRYID]" class="ajaxselect srchtarget-CTRYID validate select2-offscreen" data-validate="required" value="" data-placeholder="Select Country" type="text">
   <span class="hdricon">
     <a href="CTRYID-search" data-source="index.php?action=search&amp;source=CTRYID" class="srchbutton"><img class="imgicon" src="/images/icons/search.ico" alt="Search Country"></a>
   </span>
   <div class="searchpanel" id="CTRYID-search" style="">
    <div class="frametitle">Search Country </div>
     <div class="srchbody">
       <iframe src="index.php?action=search&amp;source=CTRYID" class="srchframe">
        #document
        <!DOCTYPE html>
        <html>
        <head></head>
         <body>
          <div id="container">
           <div id="content" style="overflow: hidden;" tabindex="5000">
            <form method="post" action="index.php?action=search&source=CTRYID" name="country">
             <div id="searchselect" class="srchrslt">
              <div class="frametitle">Search Results</div>
               <table border="1" style="margin-top: 5px;">
                <tbody>
                 <tr class="gridrow searchrow" data-search="IN|India" data-target="CTRYID">
                   <td>IN</td>
                   <td>India</td>
                   <td>IND</td>
                 </tr>
                </tbody>
               </table>
             </div>
           </form>
         </div>
       </iframe>
     </div>
    </div>
   </div>
  </td>
 </tr>
</tbody>

下面是我一直在尝试的jquery代码。

$('.searchrow').click(function (e) {
    alert($('#srchtarget-CTRYID',window.parent.document).attr('id'));
    e.preventDefault();
    var srchdata = $(this).data('search').split("|");
    var srchval = JSON.stringify({"id":srchdata[0],"text":srchdata[0]+"|"+srchdata[1]});
    var target = "srchtarget-" + $(this).data('target');
    $(target,window.document).select2().select2('val',srchval);
    $(this).parent().find('.searchpanel').hide();
  //        $(this).parents().find(target).val(srchval);
});

我从 php 获取值，只有我的 jquery 不起作用。我尝试过window.parent、window.parent.document、window.top.document（从上面的代码中可以看到），但这些似乎都不起作用。我在 iframe 之外访问的任何属性都会导致未定义（上述代码中的警报）。

更新：

玩过之后，我用window.parent.document 获得了值，但我仍然无法将值输入到 select2 控件中。我当前的代码如下所示：

$('.searchrow').click(function (e) {
    var srchdata = $(this).data('search').split("|");
    var srchval = [];
    srchval.push({"id": srchdata[0], "text": srchdata[0] + "|" + srchdata[1]});
    var target = ".srchtarget-" + $(this).data('target');
    var parentctrl = window.parent.document;
    $(target,parentctrl).select2('data',srchval);
    $(this).closest('.searchpanel').hide();
    $('.searchpanel', parentctrl).hide();
});

我已经检查了父目标元素（在我的例子中是唯一的类名）是否正确填充到变量中，并且值存在于数据变量中（作为 JSON 对象）。

更新 2：

我已经用父元素的 id 替换了唯一类（因为 select2 将类从父元素复制到 select2 控件中），所以我得到了父元素的真正唯一 id。但是，结果是一样的。我仍然无法在控件中填充结果。我更新的目标如下所示，并且我的目标 ID 已正确填充：

    var target = "#" + $(this).data('target');

我已经搜索、阅读并尝试了 SO 和 Internet 中出现的所有解决方案，但没有一个有效。有人可以帮忙吗？

【问题讨论】：

你确实意识到<iframe></iframe> 标签内的任何内容只有在浏览器不支持 Javascript（或已关闭）时才会显示，对吧？
大声笑！ @Sverri，上面粘贴的代码来自 Firebug 源，而不是来自我的 html 页面。我在此处修补了主页代码和 iframe 代码以显示完整图片。

标签： javascript jquery html iframe jquery-select2

【解决方案1】：

我升级到 v4，下面的代码“有点”用于推送值（但 select2 控件与选项重复。可能是 v4 中的错误）。

$('.searchrow').click(function (e) {
  var srchdata = $(this).data('search').split("|");
  var target = ".srchtarget-" + $(this).data('target');
  var targetoption = target + " option[value='" + srchdata[0] + "']";
  var parentctrl = window.parent.document;
  $(targetoption,parentctrl).attr("selected","selected");
  $(target,parentctrl).select2();
});

【讨论】：