Есть ли способ передачи дополнительных данных через пользовательские события?

Question

Мне нужно передать данные между двумя автономными пользовательскими сценариями - в идеале, не касаясь unsafeWindow объект - и я думал, что использование пользовательских событий будет путь. Я думал о чем-то вроде этого (давайте не будем учитывать модель MSIE для целей примера):

addEventListener("customEvent", function(e) {
  alert(e.data);
});

var custom = document.createEvent("HTMLEvents");
custom.initEvent("customEvent", true, true);
custom.data = "Some data...";
dispatchEvent(custom);

Это хорошо работает в стандартной среде javascript и в одном пользовательском сценарии, но когда событие запускается пользовательским сценарием и перехватывается за его пределами или внутри другого пользовательского сценария, data свойство undefined в хром. Я полагаю, я мог бы просто сохранить переданные данные в sessionStorage, но это далеко не без шва. Любые другие элегантные решения, господа и джентельмены? Совершенство нужно и можно достичь, я это чувствую.

Answer 1

Да, вы можете использовать MessageEvent или CustomEvent,

Пример использования:

//Listen for the event
window.addEventListener("MyEventType", function(evt) {
    alert(evt.detail);
}, false);

//Dispatch an event
var evt = new CustomEvent("MyEventType", {detail: "Any Object Here"});
window.dispatchEvent(evt);

Answer 2

Передать объект с более подробной информацией в качестве атрибутов:

var event = new CustomEvent('build', { 'detail1': "something", detail2: "something else" });

function eventHandler(e) {
  log('detail1: ' + e.detail.detail1);
  log('detail2: ' + e.detail.detail2);
}

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Answer 3

new CustomEventне поддерживается в IE https://caniuse.com/

Вот версия, которая работает в IE9+:

//Listen for the event
window.addEventListener("MyEventType", function(evt) {
     alert(evt.detail.test); //alerts "Any Object Here"
}, false);

 //Dispatch an event
 var evt = document.createEvent('CustomEvent');
 evt.initCustomEvent('MyEventType', false, false, { test: "Any Object Here" });
 window.dispatchEvent(evt);