javascript: escucha eventos postMessage de iframe específico

Solución:

Debes escuchar en el global message evento del window objeto, pero puede filtrar el iframe de origen utilizando el source propiedad de MessageEvent.

Ejemplo:

const childWindow = document.getElementById('test-frame').contentWindow;
window.addEventListener('message', message => {
    if (message.source !== childWindow) {
        return; // Skip message in this event listener
    }

    // ...
});

Si el src El atributo de cada iframe es único, entonces puedes probar esto:

Sobre el niño:

function sendHeight() {
  // sends height to parent iframe
  var height = $('#app').height();
  window.parent.postMessage({
    'height': height,
    'location': window.location.href
  }, "*");
}

$(window).on('resize', function() {
  sendHeight();
}).resize();

Sobre el padre:

$(window).on("message", function(e) {
    var data = e.originalEvent.data;
    $('iframe[src^="' + data.location + '"]').css('height', data.height + 'px');
});

El niño envía su altura y URL al padre iframe usando postMessage(). Luego, el padre escucha ese evento, toma el iframe con esa URL y le asigna la altura.

De hecho, puedes. Agregue un atributo de nombre único a cada iframe. El nombre del iframe se transmite a contentWindow. Entonces, dentro del iframe window.name está el nombre del iframe y puede enviarlo fácilmente en un mensaje de publicación.

---

---

Utiliza Nuestro Buscador