Javascript postMessage(msg) with Instance Of Class w/Methods

[Heretic86]

I have two pages, in order to visually organize data.  There is a LOT of data, so different pages are needed.

I am using window.postMessage(msg) to transfer data between two open pages.

// One page
class MyClass {
  constructor(name, value){
    this.name = name;
    this.value = value;
  }
  sayName(){
    console.log(`name is ${name}`);
  }
}
const foo = new MyClass("Bob", 123);
foo.sayName();  // works fine

window.postMessage({myMsg : foo});
// Other Page
...
function processMsg(msg){
  msg.data.myMsg.sayName();  // no worky
}

As near as I can tell, it is treating my instance of my class as an object with no methods.  What do I need to do for posting the instance of the object to the other page?

Im hoping you guys are a bit more helpful than you've been on my other questions...

[kicken]

postMessage serializes the data that you want to send.  That means that for the most part, only simple data is able to be sent, not complex stuff like functions or objects with methods.

Quote

Things that don't work with structured clone

• Function objects cannot be duplicated by the structured clone algorithm; attempting to throws a DATA_CLONE_ERR exception.
• Cloning DOM nodes likewise throws a DATA_CLONE_ERR exception.
• Certain object properties are not preserved:
  • The lastIndex property of RegExp objects is not preserved.
  • Property descriptors, setters, getters, and similar metadata-like features are not duplicated. For example, if an object is marked readonly with a property descriptor, it will be read/write in the duplicate, since that's the default.
  • The prototype chain is not walked or duplicated.

 

What you need to do is define MyClass on both pages and give it a way to be serialized to a string or simple object on the sending page and then unserialized back into the full object of the receiving page.

 

[Heretic86]

Thank you!  That's all I needed to know!

It seemed to me that what was being sent was just a JSON Object and not the instance object I was thinking.  And Im not gonna pressure to change a thing as I think having that open could be a security hole...

And yes, the class definition is in a Module, and page code is all contained in an anonymous constructor, which makes debugging a bit more difficult...  I will be sure to leave the name parameter wide open and allow all characters to be set just to be sure it can be used to run unwanted scripts, and make sure to not use CORS at all just so any remote code can also be downloaded and executed!

Kitchen, if you recall, this is part of what i want my users to have access to, so they can create new instances of this class with that CORS code you helped with!

Thank you again!