网络工作者抛出'未捕获错误:DATA_CLONE_ERR:DOM异常25'

Question

所以我正在创建一个Web worker:

var arrayit = function(obj) {
  return Array.prototype.slice.call(obj);
};
work = arrayit(images);
console.log(work);
//work = images.push.apply( images, array );
// Method : "load+scroll"
var worker = new Worker('jail_worker.js');
worker.postMessage(work)
worker.onmessage = function(event) {
  console.log("Worker said:" + event.data);
};

这是图像是什么:

$.jail.initialStack = this;
// Store the selector into 'triggerEl' data for the images selected
this.data('triggerEl', (options.selector) ? $(options.selector) : $window);
var images = this;

我认为我的问题与此有关:

http://dev.w3.org/html5/spec/Overview.html#safe-passing-of-structured-data

我怎么能绕过这个？正如你所看到的,我尝试将主机对象切成真正的数组,但这不起作用.

这是我正在攻击的文件的链接:

https://github.com/jtmkrueger/JAIL

UPDATE ------------------------------------------------- -

这是我根据@davin接受的答案所做的事情:

var arrayit = function(obj) {
  return Array.prototype.slice.call(obj);
};
imgArray = arrayit(images);
work = _.map(images, function(i){ return i.attributes[0].ownerElement.outerHTML; });

var worker = new Worker('jail_worker.js');
worker.postMessage(work)
worker.onmessage = function(event) {
  console.log("Worker said:" + event.data);
};

注意:我使用underscore.js来确保兼容性.

Answer 1

最初的异常很可能是因为您尝试将主机对象传递给Web worker(很可能是dom元素).您的后续尝试不会抛出相同的错误.请记住两个关键点:不同线程之间没有共享内存,Web工作者无法操作DOM.

postMessage支持将结构化数据传递给线程,并将内部序列化(或以其他方式递归地复制数据的值)数据.序列化DOM元素通常会导致循环引用错误,因此最好的选择是map要序列化的对象并提取要在Web worker中重建的相关数据.