有没有办法通过自定义事件传递其他数据?

时间:2012-02-23 16:32:48

标签: javascript dom javascript-events google-chrome-extension userscripts

我需要在两个自主用户脚本之间传递数据 - 理想情况下不接触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中保存传递的数据,但它远非无缝。还有其他优雅的解决方案,绅士和女士们?完美需要并且可以实现,我能感受到它。

3 个答案:

答案 0 :(得分:75)

是的,您可以使用MessageEventCustomEvent

使用示例:

//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);

答案 1 :(得分:7)

将具有更多详细信息的对象作为属性传递:

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

答案 2 :(得分:3)

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

new 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);