'Uncaught Error: DATA_CLONE_ERR: DOM Exception 25' thrown by web worker

问题

So I'm creating a 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);
};

Here's what images is:

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

I think my problem has something to do with this:

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

How can I get around this? as you can see, I tried slicing the host object into a real array, but that didn't work.

Here's a link to the file I'm hacking on:

https://github.com/jtmkrueger/JAIL

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

This is what I had to do based on the accepted answer from @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);
};

NOTE: I used underscore.js to assure compatibility.

回答1:

The original exception was most likely thrown because you tried passing a host object to the web worker (most likely a dom element). Your subsequent attempts don't throw the same error. Remember two key points: there isn't shared memory between the different threads, and the web workers can't manipulate the DOM.

postMessage supports passing structured data to threads, and will internally serialise (or in some other way copy the value of the data recursively) the data. Serialising DOM elements often results in circular reference errors, so your best bet is to map the object you want serialised and extract relevant data to be rebuilt in the web worker.

回答2:

Uncaught DataCloneError: An object could not be cloned was reproduced when tried save to indexeddb function as object's key. Need double recheck that saved object is serializable

来源：https://stackoverflow.com/questions/7506635/uncaught-error-data-clone-err-dom-exception-25-thrown-by-web-worker

标签

javascript

jquery

html5

dom

web-worker