Wie Ereignisdelegationen auf Iframe laden Ereignisse in jquery festlegen?

Question

In jquery, möchte ich dies im Grunde tun:

$(window).on('load', 'iframe', function() { 
    alert(this); 
}); 

Ist das möglich zu tun? Ich möchte eine Funktion immer dann ausführen, wenn ein Iframe dynamisch zu DOM hinzugefügt wird und das Laden beendet wird.

Answer 1

Wenn ein neues iframe dynamisch zu DOM hinzugefügt wird, müssen Sie auch dynamisch eine neue Ereignishandlerfunktion erstellen. Es ist die Regel und nichts kann das ändern.

Answer 2

Nun, ich glaube, dass dies mit der Kombination von MutationObserver und jQuery Event Bindings erreicht werden kann.

Sie können den Betrachter auf das DOM so (Beispielcode entlehnt here) registrieren:

$(function() { 
    var target = document.querySelector('body'); 

    var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     // Check if nodes are added 
     if (mutation.addedNodes.length > 0) { 
     mutation.addedNodes.forEach(function(node) { 
      // Check if the added node is an iframe 
      if (node.nodeName === "IFRAME") { 
      $(node).on("load", function() { alert("hello from iframe"); }); 
      } 
     }); 
     } 
    }); 
    }); 

    // configuration of the observer (need to research more on this) 
    var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
    }; 

    // pass in the target node, as well as the observer options 
    observer.observe(target, config); 
}); 

Die oben werden die Änderungen in DOM beobachten, und die hinzugefügten Elemente auf das DOM dynamisch überprüfen.

Ich glaube, Sie können diese Funktion nutzen, um das Ereignis zur Laufzeit an die hinzugefügten iFrames zu binden, wie ich oben getan habe.

nur nicht vergessen unobserve, nachdem Sie mit diesem fertig sind:

observer.disconnect();