0

我想将从 /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>
4

3 回答 3

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

于 2012-08-27T09:29:07.640 回答
0

这个怎么样：

<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 源位于同一域上。

于 2012-08-27T04:50:11.777 回答
0 
             $(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);
            });
于 2012-08-27T05:20:49.300 回答