Self.port 未定义答案

【问题标题】：Self.port is undefinedSelf.port 未定义
【发布时间】：2014-07-29 22:22:02
【问题描述】：

我在 popup.html 中有一个 iframe，id = Receiver，用于接收和发布消息。

以下代码来自popup.js：

self.port.on("show", function(title, url) {
    myApp.initialize(title, url);
});


var arr = new Array();
var myApp = {
    initialize: function (url,title){
        arr = [];
        arr.push(url);
        arr.push(title);

        var receiver = document.getElementById('Receiver').contentWindow;
        receiver.postMessage(arr, "*");
    },
    sendDetails : function(){
        alert("arr :"+arr);
    },
    closeIt : function(){
        self.port.emit("close-it");
    }
}  

window.addEventListener("message" , receiveMessageOnce, false);
function receiveMessageOnce(event){
    myApp.closeIt();
}

main.js 的代码是：

main_panel.on("show", function() {
    main_panel.port.emit("show", UrlActiveTab, TitleActiveTab);
});

现在，我有 2 个问题：
1.)每当它收到消息时， myApp.CloseIt() 就会被触发。但是控制台说 self.port 是未定义的。我试过使用 addon.port 也会出错。
2.) 如果调用 myApp.sendDetails()，它会将“arr”的值警告为空白，尽管它是一个全局数组。为什么会这样？

已编辑：面板构造函数代码：

var { ToggleButton } = require('sdk/ui/button/toggle');
const panel = require('sdk/panel');
var main_panel = panel.Panel({
    contentURL: data.url("popup.html"),
    contentScriptFile: [
        data.url('js/jquery-1.10.2.min.js'),
        data.url("js/popup.js")
    ],
    width: 350,
    height: 400
});

var button = ToggleButton({
    id: "myaddon_beta",
    label: "My Addon",
    icon: {
        "16": "./img/icon_main_16.png",
        "32": "./img/icon_main_32.png",
        "64": "./img/icon_main_64.png"
    },
    onChange : handleChange
});

function handleChange(state){
    currentUrl = tabs.activeTab.url;
    currentTitle = tabs.activeTab.title;
    if(state.checked){
        main_panel.show({
            position : button
        });

        button.state("window", {
            checked: false
        });
    }
}

【问题讨论】：

如果 self.port 未定义，则永远不会调用 initialize，因此永远不会调用 postMessage，因此也不会调用 receiveMessageOnce。如您所说，如果正在调用它们，则必须定义 self.port 。我同意下面的@paa，您应该使用 addon.port，但是正如您所说的那样，您已经尝试过了，我看不出问题出在哪里。我们可以看看你的面板构造函数代码吗？
@willlma ：嘿添加了构造函数代码。初始化正在工作，起初一切正常。但是当'closeIt()'被触发时，它会说，它是未定义的
运行CloseIt函数的window上下文是否有不同的self对象？尝试定义一个全局的var port = self.port，然后让closeIt 运行port.emit("close-it")。
@willlma ：我尝试创建一个全局变量，并使用它而不是 self.port，但它也返回未定义。即使它执行了所需的操作，但返回 undefined。
所以 main.js 正在接收"close-it" 事件，但是如果你在closeIt() 中执行console.log(port)，它会打印undefined？那将是非常奇怪的。你能更新你的代码来告诉我你在哪里登录到控制台吗？此外，您正在扩展环境中运行此脚本，而不仅仅是针对 HTML 页面对其进行测试，对吧？

标签： firefox firefox-addon firefox-addon-sdk add-on browser-addons

【解决方案1】：

面板被视为受信任的内容，因为您拥有它们。这样做的副作用是消息传递 API 可通过 addon 全局使用，而不是像纯内容脚本那样使用 self。

【讨论】：

"我尝试过使用 addon.port 也会出错。"