Question

我想将从iframe中加载的一些内容（div class =“StaffBlock”）从/index.html传输到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的远程网址中的内容：

<!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>

Answer 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();

Answer 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源位于同一个域中。

Answer 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);
            });

jquery追加来自iframe的内容

问题已更新：

3 个答案: