javascript - 类型错误 : Not enough arguments to Window. postMessage

Question

我正在学习网络 worker 。我正在使用以下教程

https://developer.mozilla.org/en/docs/Web/Guide/Performance/Using_web_workers

到目前为止，它有效。我有以下代码

var worker = new Worker('thing.js');

worker.addEventListener('message', function(e) {
    alert("Worker said: " +  e.data);
}, false);

worker.postMessage("Test me");

在我的 thing.js 文件中

self.addEventListener('message', function(e) {
   self.postMessage(e.data);
}, false);

以上工作正常。

但是，我需要从我的 thing.js 中将一条消息传回我的主 js 文件，以演示它传回进度更新。

同样，教程显示我可以做到这一点，所以我有以下更新的代码

var worker = new Worker('thing.js');

worker.addEventListener('message', function(e) {
    alert("Worker said: " +  e.data);
}, false);

worker.postMessage("Test me");  

在我的 thing.js 中

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

function DoThisThing() {
    postMessage("I should ALSO be working but I am not.");
}

此操作失败并显示一条错误消息(在 FireBug 中):

TypeError: Not enough arguments to Window.postMessage.

我看不出我做错了什么。

Answer 1

拥有触发问题的完整源代码会很方便，但我敢打赌，问题在于除了实例化工作程序之外，您的代码还通过脚本标签包含了工作程序文件。像这样的东西:

<script type="text/javascript" src="thing.js"></script>

所以基本上你拥有的是:

thing.js( worker )

   self.addEventListener('message', function(e) {
      self.postMessage(e.data);
    }, false);

    function DoThisThing() {
        postMessage("I should ALSO be working but I am not.");
    }

    DoThisThing();

我假设您正在调用 DoThisThing()，否则您将不会收到 "TypeError: Not enough arguments to Window.postMessage" 错误。

如果您按原样运行代码，但您也会看到错误。

TypeError: Not enough arguments to Window.postMessage.
Worker said: I should ALSO be working but I am not.  
Worker said: Test me

那么是什么触发了 TypeError:没有足够的参数......？如果您从 script 标签获取文件，该函数实际上会执行两次。第一次调用时出现错误。

当 thing.js 被脚本标签获取时，DoThisThing() 被执行。那是第一个电话。 DoThisThing() 调用 postmessage(与 self.postmessage 相同)。但是这个调用被解析为 window.postmessage。此方法需要第二个参数 (targetOrigin)。

然而，当 worker 被执行时，对 postmessage 的调用(与 self.postmessage 相同)被解析为 DedicatedWorkerGlobalScope.postmessage。此方法不需要第二个参数。

当您向 postmessage 添加第二个参数时，您解决了第一次调用的问题，但没有解决第二次调用的问题。因此你得到了一个新的错误:“TypeError: Argument 2 of DedicatedWorkerGlobalScope.postMessage can't be converted to a sequence”。

总结一下，有两种类型的postmessages，一种属于window 对象，另一种属于DedicatedWorkerGlobalScope 对象。对 postmessage 的简单调用通常由 DedicatedWorkerGlobalScope 对象解析。这个电话方便 worker 与 parent 沟通。 window.postmessage 需要第二个参数来指定 targetOrigin。这个调用方便跨域通信。

在您的情况下，问题的可能原因是从 script 标记中获取 worker JavaScript 文件。这导致 postmessage 由窗口解析，这需要第二个参数。