我正在开发一个简单的插件,它可以在页面上查找数字并将它们显示在插件的 html 面板中。
如何访问数据并分配变量 with port.on ?
myMessagePayload 包含从 main.js 文件发送的 "4000, 800"
。
//main.js
var tag = ".first, .second";
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
//include: "*.example.com",
include: "http://example.com/*",
contentScriptFile: data.url("element-getter.js"),
onAttach: function(worker) {
worker.port.emit("getElements", tag);
worker.port.on("gotElement", function(elementContent) {
pcPanel.port.emit("message",elementContent);
});
}
});
// element-getter.js
self.port.on("getElements", function(tag) {
var elements = document.querySelectorAll(tag);
for (var i = 0; i < elements.length; i++) {
self.port.emit("gotElement", elements[i].innerHTML);
}
});
// display.html
addon.port.on("message", function handleMyMessage(myMessagePayload) {
var firstNumber = parseInt(myMessagePayload[0]);
var secondNumber = parseInt(myMessagePayload[1]);
}
console.log(myMessagePayload);
//info: addon: 4000
//info: addon: 800
console.log(myMessagePayload[0]) //returns 4
console.log(myMessagePayload[1]) //0
console.log(myMessagePayload[2]) //0
console.log(myMessagePayload[3]) //0
如何将 port.on() 接收到的值设置为变量?
最佳答案
.port.on()
将接收对象。您可以发送任何 JSON 可序列化的对象,例如
普通旧数据类型,例如数字
port.emit("num", 100); .port.on("num", function(data) { console.log(data == 100); });
或字符串等
port.emit("str", "mystring"); .port.on("str", function(data) { console.log(data == "mystring"); var anotherVariable = data; // pointless, but whatever. });
或实际对象(JSON 可序列化)
port.emit("obj", { str: "mystring", num: 100, arr: [1,4,5], obj: {str: "anotherString"} }); .port.on("obj", function(data) { console.log(data.str == "mystring"); console.log(data.num == 100); console.log(data.arr[1] == 5); console.log(data.obj.str == "anotherString"); var anotherVariable = data.obj.str; });
有关更多信息,请阅读:Communicating using "port"
编辑
在你现在给出一些实际代码之后,基于心理调试,我认为我理解你的问题。
一次传输所有元素。请记住:您可以传输数组。
self.port.on("getElements", function(tag) { var elements = Array.map(document.querySelectorAll(tag). function(e) e.innerHTML); self.port.emit("gotElements", elements); });
只需将数据传输到面板
worker.port.on("gotElements", function(elements) { pcPanel.port.emit("message", elements); }
在面板中,您现在在一条消息中获得了所有匹配元素
addon.port.on("message", function handleMyMessage(elements) { var firstNumber = parseInt(elements[0], 10); var secondNumber = parseInt(elements[1], 10); // more elements? }
关于javascript - 在 Firefox 附加组件 SDK 中使用 port.on 传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19038938/