# Ability to send messages between power-up iframes

**URL:** <https://community.developer.atlassian.com/t/ability-to-send-messages-between-power-up-iframes/66769>\
**Category:** Trello\
**Created:** [February 26, 2023, 10:38pm UTC](https://community.developer.atlassian.com/t/ability-to-send-messages-between-power-up-iframes/66769 "2023-02-26T22:38:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mail.vpal](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/mail.vpal/32/33944_2.png) [@mail.vpal](https://community.developer.atlassian.com/u/mail.vpal)\
**Post date:** [February 26, 2023, 10:38pm UTC](https://community.developer.atlassian.com/t/ability-to-send-messages-between-power-up-iframes/66769/1 "2023-02-26T22:38:46Z")

</div>

Hi!

It would be good to have an ability communicate throught `postMessage` between power-up iframes in order to share a data. Main power-up iframe connector and card-back iframe could be share data, users list as example.  
Let me know if it make sense.

---

<div class="post-metadata">

**Author:** ![DEC](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@DEC](https://community.developer.atlassian.com/u/DEC)\
**Post date:** [March 16, 2023, 2:58am UTC](https://community.developer.atlassian.com/t/ability-to-send-messages-between-power-up-iframes/66769/2 "2023-03-16T02:58:50Z")

</div>

I have had to do this. I created this class in JavaScript:

```javascript
/**
 * Class to help pass messages between forms
 */
export default class MessageHook {
  /** @type {Hook[]} */
  #hooks = [];
  /**
   * CONSTRUCTOR - starts the loop 
   */
  constructor() {
    // main loop
    window.setInterval(()=>{
      /** @type {String} */
      const value = window.sessionStorage.getItem("callbackMessage");
      if(value) {
        const data = JSON.parse(value);
        var hookToRemove = -1;
        for(var i=0;i<this.#hooks.length;i++) {
          if(data.from === this.#hooks[i].listenFor) {
            window.sessionStorage.removeItem("callbackMessage"); // processed
            // call the callback
            this.#hooks[i].callback(data.value, data.asyncValues);
            hookToRemove = i;
            break;
          }
        }
        if(hookToRemove >= 0) {
            this.#hooks = this.#hooks.splice(hookToRemove, 1);
        }
      }
    }, 200); // 5 per second
  }
  /**
   * Adds a hook to the Message handler
   * @param {*} callback 
   * @param {*} from 
   * @param {*} asyncValues
   */
  addMessageHook = (callback, listenFor, asyncValues) => {
    this.#hooks.push({
      listenFor: listenFor,
      callback: callback,
      asyncValues: asyncValues,
    });
  }
  /**
   * Sends a message to any attached message Hook
   * @param {*} msg 
   * @param {*} from 
   */
  sendMessage(value, from) {
    window.sessionStorage.setItem("callbackMessage", JSON.stringify({ from: from, value: value }));
  }
}
/**
 * @typedef {Object} Hook
 * @property {String} listenFor
 * @property {MessageHookCallback} callback
 * @property {Object} asyncValues
 */
/** 
 * @callback MessageHookCallback
 * @param {Object} value
 * @param {Object} asyncValues
 */

```

I then declare this in a common location to my app:

static AppMessageHook = new MessageHook();

Then I use it like this:

```javascript
AppMessageHook.addMessageHook(async (value)=>{ 
  // this is what happens when I receive a message
  // for -vvvv- this caller name.
}, "callerName");

// now here you open up your frame
t.popup(...);

```

Next, in the caller iframe, I do this when I want to go back to the code callback above:

```javascript
AppMessageHook.sendMessage(value, "callerName");

```

This allows for multiple message hooks across multiple frames and automatically cleans up once it recieves the message.

Let me know if this help.