0

他の人がiframeを介して自分のHTMLにロードできるウィジェットを作成しました。カスタムjsファイル（iframe srcとして）をiframeにロードするためにすべてが正常に機能しています。また、ajax.googleapis.com / ajax / libs / jquery / 1.7.1/jquery.min.jsからjqueryを読み込んでいます。次に、カスタムjsは、jsファイルと同じドメイン上のサーバーから$ .get（）を使用して、さまざまな間隔でいくつかのjsonをロードして解析します。jsonを使用して、iframe内に追加するhtml要素を作成します。繰り返しますが、これはすべて期待どおりに機能しています。

私が抱えている問題は、iframe内に追加したhtmlをアニメーション化したいということです。アニメーションを処理するために次の関数を使用しています。

function embeddedUnMarkAsNew($el) {
    $el.animate({color:"black"}, 500)
}

function embeddedMarkAsNew(timeToMark, $el){
    alert("marking for this time: "+timeToMark)
    //start animation
    $el.animate({color:"red"}, 500);
    //end animation when duration runs
    setTimeout(function() { 
        embeddedUnMarkAsNew($el);
    }, timeToMark)
    return false
}

EmbeddedMarkAsNew（）内のアラートは、適切なtimeToMarkでトリガーされますが、要素はアニメーション化されません。試してみるためにアニメーションをaddClass（）に変更しました。クラスは追加されたものとしてインスペクターに表示されますが、要素自体はこの追加されたクラスを反映していません。

私はこのテクニックをiframe外の要素に使用しました。私の問題を引き起こしているiframe内でこれを行うことについてはどうですか？

ありがとう

4

2 に答える 2

0

発生している問題は、基本的なブラウザ セキュリティに関連しています。

クロスオリジン スクリプトは、無数のセキュリティ問題を引き起こす可能性があるため、この方法では実行できません。

ただし、window.postMessage を使用すると、あなたがしようとしていることは可能です。

こちらのドキュメントをご覧ください: https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

基本的に、必要なことに関連するデータを含むメッセージを受信する必要があるページ (iframe) にイベント リスナーが必要です。何かを行うように指示する必要がある包含ページは、window.postMessage を呼び出します。

otherWindow.postMessage(message, targetOrigin);

otherWindow は、次の JavaScript を実行することで、ディスパッチされたメッセージをリッスンできます。

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

ただし、event.origin をチェックして、古いオリジンだけがこの方法でメッセージを投稿できるわけではないことを確認する必要があることに注意してください。

HTH

于 2012-12-14T21:54:36.463 に答える
0

jquery はデフォルトではカラー アニメーションで動作しません。カラー アニメーションを使用するには、 bitstorm カラー アニメーション jquery プラグインなどのライブラリが必要です。

iframe から要素を取得するには、ここに.contants() jquery メソッドが必要です:

function embeddedMarkAsNew(timeToMark, $el) {
    // alert("marking for this time: "+timeToMark)
    //start animation
    $el.animate({
        color: '#FF0000'
        }, 500)
        .delay(timeToMark)
        .animate({color: "#000000"},500);
    return false
}

function demo_fill_iframe() {
        var iframe=$('#iframe').contents().find('body');
        iframe.append($('<div id="test">').text('TEXT'));
}
//create div in iframe
demo_fill_iframe();


//run function!
embeddedMarkAsNew(10000,$('#iframe').contents().find('#test'));
embeddedMarkAsNew(1000,$('#test2'));
​

ご覧のとおり、iframe 内でアニメーション化するために何も変更されていません。delay()また、次の利点を持つサブ関数を呼び出す代わりに使用したことにも注意してください-最初のdelayアニメーションの終了を待ってから、色を元に戻すことだけが必要な場合は2番目のアニメーションを実行することがdelay最良の選択です. また、関数内のパラメーターの順序を交換してほしいので、2 番目のオプションをスキップしてデフォルトとして設定できます。

function embeddedMarkAsNew($el,timeToMark,AnimationTime) {
    //default time is 1000
    timeToMark=timeToMark!==undefined?timeToMark:1000
    AnimationTime=AnimationTime!==undefined?AnimationTime:500;
    //start animation
    $el.animate({
        color: '#FF0000'
        }, AnimationTime)
        .delay(timeToMark)
        .animate({color: "#000000"},AnimationTime);
    return false;
}
于 2012-12-14T22:21:33.233 に答える