HTML 5网页工作者与多个参数

Question

我刚开始学习HTML5的Web Workers技术，现在我想向我的worker传递多个参数。

这是我的页面中的代码：

var username = document.getElementById("username").value;
var server_url = 'localhost';
w.postMessage(username,server_url);

以下是我的工作程序中的代码：

var username = '';
var server_url = '';

onmessage = function (e,f) {
    username = e.data;
    server_url = f.data;
}
console.log(username);
console.log(server_url);

当我在浏览器中打开调用worker的页面时，出现以下错误信息：Uncaught TypeError: Failed to execute 'postMessage' on 'Worker': The 2nd argument is neither an array, nor does it have indexed properties. 我想要实现的是将username和server_url传递给worker。虽然在示例中我硬编码了server_url，但在实际脚本中，它是动态的。

请不要只是简单的说：“更改这个，做那个”，而是提供代码，以便我可以看到该如何完成，而不必自己去摸索。

- Finlay Roelofs

---

将多个参数一起传递到单个JSON中，例如w.postMessage({user:username,url:server_url}); - Cyril Cherian

嗯...我明白了。那么我该如何在工作线程中读取它们呢？ - Finlay Roelofs

Answer 1

像这样发布：

w.postMessage({ 
    user: username, 
    url: server_url 
})

在收到消息事件时执行以下操作：

onmessage = function (e) {
    username = e.data.user;
    server_url = e.data.url;
}

- Cyril Cherian

---

搞定了 :) 虽然我遇到了一个“未定义”的用户名，但通过将 w.postMessage({user:username,url:server_url}) 更改为 w.postMessage({username:username,url:server_url}) 轻松解决了这个问题。 - Finlay Roelofs

从函数中删除参数'f'。它是不必要的，会导致混淆。 - Akshay Chopra