jqueryのiframeTrackerプラグインを使用して動的に追加されたiframeのクリックイベントを追跡する方法

Question

iフレームのclickイベントをjqueryのプラグインであるiframeTrackerを使用して追跡できます。

  $('.fb-like').iframeTracker({ 
       blurCallback: function(){ 
        console.log("liked page"); 
        window.location.href = "like_update"; 
       } 

      }); 

しかし、私は動的に追加されたiframeをクリックすると、このフレームで動的に追加されたクリックを検出できません。

Answer 1

iframeが動的にページに追加されるときは、iframeトラッカーを再初期化して新しいiframeを見つける必要があります。新しいiframeを追加するイベントを検出し、document.readyState === "complete"の場合は、iframeTracker関数を再実行します。

checkForIframes関数を作成し、 'iframeの追加'イベントを検出したときに実行することができます。たとえば、iframeを追加するボタンにcheckForIframesを添付します。新しいiframeのは、ダイアログボックス内にある場合

// document must be in readyState 'complete' before checking for iframes - $(document).ready() is not good enough! 
    var checkForIframes = function() { 
     console.log('start checkForIframes'); 

     var docReadyCheck, isDocReady; 

     docReadyCheck = function() { 
     if (document.readyState === "complete") { 
      console.log('check for iframes, now that the document is complete'); 
      clearInterval(isDocReady); 

      $('.fb-like').iframeTracker({ 
      blurCallback: function(){ 
       console.log("New iframe added"); 
       // ... 
      } 

     }); 
     } 
     }; 

     isDocReady = setInterval(docReadyCheck, 1000); // check once a second to see if document is complete 
    }; 

は、ダイアログボックスが開いたときに検出し、checkForIframes機能を実行することができます。

// triggered when a dialog is opened, recheck for iframes 
$("body").on("dialogopen", function() { 
    console.log('Detected a dialogopen event'); 
    checkForIframes(); 
}); 

私はこのiframeTrackerプラグインを使用していないので、私はこのコードはかなり右であるかどうかわからないけど、私は動的に追加のiframeで動作するのidleTimeoutプラグインを持っています。動的に追加されたiframeを検出する方法のデモをご覧ください：http://jillelaine.github.io/jquery-idleTimeout/iframe-demo.html