jquery从iframe追加内容答案

【问题标题】：jquery append content from iframejquery从iframe追加内容
【发布时间】：2012-08-27 04:35:05
【问题描述】：

我想将从 /index.html 的 iframe 加载的 (div class="StaffBlock") 中的一些内容传输到 div class="Contact-Agent-Append"。但我的 jquery 不工作，我不知道为什么，是因为我从 iframe 加载它？谢谢。

<iframe scrolling="no" height="60px" frameborder="0" width="150px" src="/index.html" marginwidth="0px" marginheight="0px" style="overflow:hidden; margin:0; padding:0; display: none;"></iframe>

<script>
$('.StaffBlock').appendTo($('.Contact-Agent-Append'));
</script> 

<div class="Contact-Agent-Append">content should go here
</div>

问题更新：

这是存储在包含 StaffBlock 的远程 url 中的内容：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/StyleSheets/listing-contact.css" />
</head>
<body>
<div class="listing-contact">
<div class="StaffBlock">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="col-a">{tag_name}</td>
    <td class="col-b" rowspan="4">{tag_Staff Photo}</td>
  </tr>
  <tr>
    <td>{tag_job title}</td>
  </tr>
  <tr>
    <td>{tag_mobile}</td>
    </tr>
  <tr>
    <td><a href="mailto:{tag_email}">email me</a></td>
  </tr>
</table>
</div>
</div>

</body>
</html>

这是包含 iframe 的原始编码：

<div class="Contact-Agent-{tag_Publish As Agent}">

    <div class="Contact-Agent-Small-Logo-listing" title="this property is published by agent">
    </div>
    <iframe scrolling="no" height="60px" frameborder="0" width="150px" src="{tag_listing agent staff url}" marginwidth="0px" marginheight="0px" style="overflow:hidden; margin:0; padding:0; display: none;"></iframe>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('iframe').contents().find('.StaffBlock').clone().appendTo($('.Contact-Agent-Append'))‌‌
});//]]>  
    </script> 
    <div class="Contact-Agent-Append">1
    </div>

</div>

【问题讨论】：

标签： jquery append

【解决方案1】：

您必须考虑到您必须等到页面和 iframe 都准备好进行 DOM 操作。使用一个$(document).ready() 是不够的。

在您的情况下，您似乎可以修改 iframe 的内容。我建议使用 iframe 将数据推送到主页，而不是从中获取数据，它会确保两者都准备就绪。

您可能需要在 iframe 中加载 jQuery，最棒的是您可以向选择器添加参数以更改其上下文。默认为文档，但在您的情况下，您需要从 iframe 文档定位主页。

另外不要忘记，如果你想要一个 div 的内容，一个选择器是不够的。使用它的.html() 或.clone() 它。

// in your iframe :
$(document).ready(function()
{
    $('.Contact-Agent-Append', window.parent.document)
    // or window.parent.$('.Contact-Agent-Append')
        .append( $('.StaffBlock').html() );
});

您可能希望根据需要调整选择器，但它会比 setInterval 更快。如果一开始它不起作用，请尝试从主页中删除 jQuery 以防止任何冲突，如果它解决了您的问题，请尝试使用 j=jQuery.noConflict();

【讨论】：

【解决方案2】：

这个怎么样：

<iframe id="iframe1" scrolling="no" height="60px" frameborder="0" width="150px" src="/index.html" marginwidth="0px" marginheight="0px" style="overflow:hidden; margin:0; padding:0; display: none;"></iframe>

$(document).ready(function() {
   $('#iframe1').each(function() {
       $('.Contact-Agent-Append').append($('div.StaffBlock',this.contentWindow.document||this.contentDocument).html() );
    })
});

这假定 iframe 源位于同一域中。

【讨论】：

不，仍然无法正常工作。这是我原来的 iframe：
还要确保在加载文档后执行所有这些操作。
没有任何错误，但应该显示的内容没有显示

【解决方案3】：

             $(window).load(function(){
var flag=true;
          var id= setInterval(function(){if(typeof($('iframe').contents().find('body.StaffBlock').html())!='undefined')
               {
if(flag){
$('.Contact-Agent-Append').append( $('iframe').contents().find('body.StaffBlock').clone())‌‌; 
}
flag=false;
        }

    },500);
            });

【讨论】：

嗨 Ashivad，感谢您的代码，它可以工作，但问题是它重复了 StaffBlock 20 次
不，不工作。代码正在工作，但重复 20 次是：