“DataCloneError：无法克隆对象。”在火狐 34答案

【问题标题】："DataCloneError: The object could not be cloned." in FireFox 34“DataCloneError：无法克隆对象。”在火狐 34
【发布时间】：2015-02-17 22:30:38
【问题描述】：

使用给定函数发布消息，但收到错误“DataCloneError：无法克隆对象。”在 "target['postMessage'](message, target_url.replace( /([^:]+://[^/]+).*/, '$1')) 行处在 FireFox-34 中，相同的代码在 Chrome 和旧版本的 FireFox 上运行良好。

var storage = function() {
    return {
           postMessage : function(message, target_url, target) {
           if (!target_url) { 
              return; 
           }
           var target = target || parent;  // default to parent
           if (target['postMessage']) { 
                   // the browser supports window.postMessage, so call it with a targetOrigin
                   // set appropriately, based on the target_url parameter.
                   target['postMessage'](message, target_url.replace( /([^:]+:\/\/[^\/]+).*/, '$1'));
               }               
         }
    }
}();

【问题讨论】：

发生错误时尝试发布的“消息”类型是什么？可能是 Blob 还是文件？
如果传递的message 变量包含诸如DocumentFragment 对象的DOM 节点对象，您需要在发送前使用XMLSerializer.prototype.serializeToString 方法将其转换为字符串。您可以使用DOMParser 对象或Element.prototype.innerHTML、Element.prototype.insertAdjacentHTML 或Element.prototype.outerHTML 方法来反序列化另一端的对象。

标签： javascript local-storage mozilla postmessage

【解决方案1】：

postMessage 在 Firefox 中使用 structured clone algorithm 发送消息，因此在发送之前您需要进行一些调整。

在您的示例中，消息包含的内容并不明显，但围绕结构化克隆的一种 hack-y 方法是强制一点。通过postMessage 发送 URL 会抛出错误：

someWindow.postMessage(window.location, '*');
// ERROR

但是你可以这样做来解决它：

var windowLocation = '' + window.location;
someWindow.postMessage(windowLocation, '*');
// WORKS

有更好的方法来处理这个问题，但对于你所提供的，这至少应该允许一致的行为。

【讨论】：

我偶然发现了这个答案，它引导我进行字符串转换来解决我的问题，我建议简单地使用window.location.href，这是“tostring”方法将引用的值，谢谢。