1

我正在做一个项目，我需要在 iframe 中创建一个对象，然后将所述对象发送到父窗口。

问题是postMessage失败，因为对象不能被克隆 ( DataCloneError)，因为它具有函数 ( callback) 属性。

更复杂的是，存在一种循环关系，其中按钮列表包含按钮，并且每个按钮都有对其父列表的引用。

如果这是使用JSON.stringify而不是结构化克隆，则可以覆盖toJSON按钮并避免发送callback并替换list为listId以避免循环引用情况。是否有等效于结构化克隆的方法，可以在保持循环关系的同时toJSON允许忽略，或者其他解决方案？callback

这是可重现错误的情况的粗略要点：

class ButtonList {
    constructor() {
        this.buttons = [];
    }

    addButton(button) {
        if (!this.buttons.includes(button)) {
            this.buttons.push(button);
            button.setList(this);
        }
        return this;
    }
}

class Button {
    setList(list) {
        if (!list) return this;
        if (this.list !== list) {
            this.list = list;
            list.addButton(this);
        }
        return this;
    }

    setCallback(callback) {
        this.callback = callback;
        return this;
    }

    getCallback() {
        return this.callback;
    }

    runCallback() {
        if (!this.callback) return this;
        this.callback();
        return this;
    }
}

const list = new ButtonList();
const button = new Button().setList(list).setCallback(() => console.log('Hello'));
window.postMessage(list, '*');

// DataCloneError: The object could not be cloned.

父窗口不需要知道回调，但需要知道任何其他属性。

4

1 回答 1

1

创建一个具有覆盖属性的新对象，Object.assign并通过postMessage.

const foo = {
  bar: 'bar',
  list: { bla: 'bla' },
  baz: function() {
    console.log('baz')
  }
}

const serializable = Object.assign({}, foo, { 
  list: 3,
  baz: undefined 
})

console.log(serializable)

于 2019-01-31T16:24:49.240 回答