Question

我的页面定义如下：

<body>
    <div id="container">
        <p>
            <input id="myButton" type=button onclick=window.open('LandingPage.html'); value="Launch Search App">
        </p>
    </div>
    <script>
        function cb(msg) { console.log(msg); }
        myButton.addEventListener('click', cb);
    </script>
</body>

此页面负责为辅助页面设置回调函数。回调函数似乎已设置，至少根据F12开发人员工具我看到PointerEventPrototype已创建。如果我注释掉包含设置回调的PointerEventPrototype的行，那么addEventListener()就不存在了，所以我相信到目前为止我已经有了它。

单击第一页上的按钮启动另一个包含第二页的窗口，如下所示：

<body>
    <div id="container">
        <p>
            <input type=button value="Save" onclick="click_function()">
        </p>
    </div>
    <script>
        function click_function() {
            var message = "Save button clicked!";

            console.log(message);
            cb(message);
        }
    </script>
</body>

第二页包含一个Save按钮，用于响应第一页上的回调函数设置。单击“保存”按钮时，单击“＃34;保存”按钮！＆＃34;输出到控制台，但是以下行cb(message)抛出一个错误，指出cb未定义。这怎么可能不明确？我是否需要使用不同的语法调用回调函数？

Answer 1

cb仅存在于第一页中。如果他们位于相同的来源，则您的第二页可以通过其window全局引用第一页的全局opener，因此：

opener.cb(message);

这只有效，因为cb在第一页上是全局的，因此它是window对象的属性。

尽管如此，使用web messaging可能是一种更简洁的设计，并且它带来的好处是它也可以交叉起源。不是让一个页面伸出来并在另一个页面中调用一个函数，而是通过Web消息发送消息到页面并让它处理消息，但它认为合适。在my answer here中有一个完整而简单的例子。

为什么我的回调函数未定义？

1 个答案: