5

私は2つのウェブサイトA.comとB.comを持っています。A.comのiframeにB.comを埋め込む必要があります。B.comで変更を加えることはできません

B.comは、一部の投稿データを含む投稿リクエストでのみ機能します。私はこれを次のように機能させています

<!--This is the div inside which I will embedd the iframe-->
<div id="frameDiv"></div>

<script type="text/javascript">

    //Create iframe
    var $ifr = $('<iframe name="myFrame" id="myFrame"></iframe>');

    //create form
    var $form = $('<form action="B.com" method="post" target="myFrame"></form>');

    //Append hidden field to form to pass postData
    $form.append($('<input type="hidden" name="dataName"><input>').val('data'));

    //Append form to the iframe and then append iframe to the div    
    $('#frameDiv').append($ifr.append($form));

    $form.submit();
</script>

これで、B.comはiframe内に完全に読み込まれ、POSTリクエストに応答します。しかし、B.comは遅いです。iframeが読み込まれるまで#frameDiv内にスピナーを表示したいと思います。これどうやってするの？

これは私が試したものです：

$('#frameDiv').append($spinnerImage)

//Does not work, fires immediately
$ifr.load(function(){
    //Hide the spinner image
});

//Does not work, fires immediately
$ifr.ready(function(){
    //Hide the spinner image
});

B.Comが単純なgetであり、iframeのsrc属性として設定されている場合、jQueryloadメソッドがそのトリックを実行します。しかし、この場合はそうではありません。

どんな助けでも大歓迎です:)

4

2 に答える 2

11

@charlietflの答えは正しく、機能します。私は、これも機能することがわかった他の方法を共有したかっただけです。

iframeの背景をスピナーに設定するだけです:)

#myFrame
{
    background-image: url('/content/images/spinner.gif');   
    background-repeat: no-repeat;
}

B.comが読み込まれると、新しいドキュメントはスピナーを非表示にします。

どのアプローチが好ましいか？

于 2012-06-25T02:11:20.307 に答える
5

iframeの初期ロードイベントハンドラー内で新しいロードイベントリスナーをバインドしてみることができます。以下は同じドメインのiFrameで機能します。

$ifr.load(function(){
    /* bind new load event listener for next load*/
    $(this).load(function(){
         /* hide spinner*/
    })
});
于 2012-06-25T00:15:19.283 に答える