有没有办法通过自定义事件传递附加数据？

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 环境和一个用户脚本内运行良好，但是当事件由用户脚本触发并在其外部捕获时或者在另一个用户脚本中，Chromium 中的 data 属性是 undefined。我想我可以将传递的数据保存在 sessionStorage 中，但这远非无缝。还有其他优雅的解决方案吗？完美需要并且可以实现，我能感觉到。

Answer 1

是的，您可以使用 MessageEvent 或 <代码>自定义事件。

用法示例：

//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', { detail: { '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

IE 不支持新的 CustomEvent https://caniuse.com/#search=CustomEvent

这是一个也适用于 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);