Özel Olayı Iframe'den Ana Belgeye Tetikle

Question

Bir iframe içindeki özel bir olayı tetiklemek ve üst belgeden algılamak için biraz sıkıntı yaşıyorum. Hem iframe hem de parent document aynı kaynağa sahip (aynı protokol, aynı host, aynı port).

Herhangi bir öneri?

Answer 1

Bu çalışır: iframe üst belgedeki tespit edilecek iç

parent.$('body').trigger('eventName'); 

olay tetiklenir.

Answer 2

Benzer bir soruna rastladım ve çözmek için window.postMessage'ı kullandım.

Şu anda API yalnızca bir dizeyi geçirmeyi desteklemektedir, ancak çözümünüzü değiştirirseniz güçlü olabilir. Daha fazla detay kaynak sayfa (bir iframe tarafından tüketilen) Gönderen

here:
postMessage API 2 params beklediğini - Mesajı,

ex hedef: (ana sayfasından window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

iframe içerir. örneğin Konteyner):

1. normalde

   yaptığınız gibi bir olay dinleyici ekleyin

   window.addEventListener('message', handleMessage, false); 
   

2. aynı etki alanları ve alanlar arası iframe'ler hem olay sistemini kullanmaktır destekleyen

   function handleMessage(event) { 
       if (event.origin != "h ttp://child.com") { return; } 
       switch(event.data.message) { 
        case "HELLO_PARENT": 
         alert("Hello Child"); 
         break; 
       } 
   } 
   

Answer 3

\ tutarlı cevap (güvenlik) event.origin çek ile işlevi tanımlayın.

Amaç, iframe'den ebeveyne özel bir etkinlik göndermektir. iframe kaynak dosyasında

:

window.document.addEventListener('myEvent', handleEvent, false) 
function handleEvent(e) { 
    console.log(e.detail) // outputs: {foo: 'bar'} 
}