Jump to content

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

Go to solution Solved by kicken,

Recommended Posts

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;
    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...

Link to post
Share on other sites
  • Solution

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.


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.


Link to post
Share on other sites

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!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.