Perché i miei parametri non vengono passati a un evento inviato?

Question

Ok così ho creato un listenr evento come questo ...

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

var parseMessage = function(rawMessage) { 
    console.log(rawMessage.cmd); 
}; 

E poi sto attivando l'evento come questo:

var event = new Event('message', {'cmd':"blerg!"}); 

window.dispatchEvent(event); 

Il problema è il console.log in il messaggio di analisi si disconnette indefinito quando mi aspetto di disconnettere "blerg!"

Cosa sto facendo di sbagliato qui con gli eventi, come passare il messaggio "cmd" all'evento?

Answer 1

1. Usa CustomEventinvece di Event per la creazione di eventi personalizzati.

2. Specificare i dati in un oggetto "dettagli" (vedere codice).

3. Ho cambiato il nome dell'evento perché message viene utilizzato anche per postMessage API. Non ha causato problemi durante l'esecuzione in Chrome, ma non lo userei.

 

var parseMessage = function(rawMessage) { 
    console.log(rawMessage); 
    console.log(rawMessage.detail.cmd); 
}; 

// changed event name 
window.addEventListener('myMessage', parseMessage, false); 

// data should be in a 'details' object 
var evt = new CustomEvent('myMessage', { 
    detail: { 
     'cmd' : "blerg!" 
    } 
}); 

window.dispatchEvent(evt); 

Ecco un adeguamento per IE> = 9 compatibilità (utilizzando document.createEvent() e CustomEvent::initCustomEvent()):

var evt = document.createEvent("CustomEvent"); 
evt.initCustomEvent('myMessage', false, false, { 
    'cmd': "blerg!" 
}); 

Answer 2

Per IE9/10 polyfill è possibile utilizzare questo codice fornito di Mozilla:
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

(function() { 
    function CustomEvent (event, params) { 
    params = params || { bubbles: false, cancelable: false, detail: undefined }; 
    var evt = document.createEvent('CustomEvent'); 
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); 
    return evt; 
    } 

    CustomEvent.prototype = window.Event.prototype; 

    window.CustomEvent = CustomEvent; 
})(); 

anche descritto qui, ma con l'URL sbagliato: https://stackoverflow.com/a/22946340/1736012