Fatal编程技术网
  • jquery/
  • jquery从iframe追加内容

jquery从iframe追加内容

jquery

jquery从iframe追加内容,jquery,append,Jquery,Append,我想将从iframe from/index.html加载的（div class=“StaffBlock”）中的一些内容传输到div class=“Contact Agent Append”中。但是我的jquery不工作，我不知道为什么，是因为我从iframe加载它吗？谢谢 <iframe scrolling="no" height="60px" frameborder="0" width="150px" src="/index.html" marginwidth="0px" marginh

我想将从iframe from/index.html加载的（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'）.appendTo（$（'.Contact-Agent Append'））；
内容应该放在这里
问题更新： 这是存储在包含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>

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


{tag_name}
{tag_员工照片}
{tag_职务}
{tag_mobile}
这是包含iframe的原始编码：

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

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


//  
1.
这个怎么样：

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


$（文档）.ready（函数（）{
$（'#iframe1'）。每个（函数（）{
$（'.Contact Agent Append'）.Append（$（'div.StaffBlock'，this.contentWindow.document | | this.contentDocument.html（））；
})
});
这假设iframe源位于同一个域上。

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

             $(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);
            });
在您的情况下，似乎可以修改iframe的内容。我建议使用iframe将数据推送到主页，而不是从主页获取数据，这样可以确保两者都准备好了

您可能需要在iframe中加载jQuery，最棒的是您可以向选择器添加一个参数来更改其上下文。默认值为document，但在您的情况下，需要将iframe文档的主页作为目标

也不要忘记，如果您想要div的内容，选择器是不够的。使用它的
.html（）
或
.clone（）
it

// in your iframe :
$(document).ready(function()
{
    $('.Contact-Agent-Append', window.parent.document)
    // or window.parent.$('.Contact-Agent-Append')
        .append( $('.StaffBlock').html() );
});
您可能希望根据需要调整选择器，但其工作速度将快于设置间隔。如果一开始它不起作用，请尝试从主页上删除jQuery以防止任何冲突，如果它解决了您的问题，请尝试使用

nope，但仍然不起作用。这是我的原始iframe：也请确保在加载文档后执行所有这些操作。没有任何错误，但应该显示的不是showingHi Ashivad，感谢您的代码，它可以工作，但问题是它在StaffBlocknope中重复了20次，不起作用。代码正在工作，但重复20次的代码为：//