0

iframeから/index.htmlからdivclass= "Contact-Agent-Append"にロードされたコンテンツを（div class = "StaffBlock"）から転送したいと思います。しかし、私の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 に答える