# Request: add message API to support smooth iframe integration

**URL:** <https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592>\
**Category:** Feature Requests\
**Created:** [23 July 2019 09:21 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592 "2019-07-23T09:21:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![anatolyw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anatolyw/32/26648_2.png) [@anatolyw](https://discourse.nodered.org/u/anatolyw)\
**Post date:** [23 July 2019 09:21 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/1 "2019-07-23T09:21:08Z")

</div>

In my product I integrate node-red in `<iframe>` inside a bigger admin dashboard which is written in Angular. Also I put a list of node-red flows to the left-side menu of my dashboard as it is more convenient for me from UI perspective.

**CURRENT STATE** : when I select flow on my left-side menu I have to reload content of iframe as there is no possibility to communicate with node-red inside and instruct it to switch to different flow smoothly. Result: refresh of node-red inside iframe.

**PROPOSAL** : include in `index.mst` following script:

```javascript

...

<!-- PATCH: BEGIN -->
<script>
    function displayMessage (evt) {
        const selector = `red-ui-tab-${evt.data}`
        const el = document.getElementById(selector);
        const elTrigger = el.querySelector('a');
        if (elTrigger.onclick) {
        elTrigger.onclick();
        } else if (elTrigger.click) {
        elTrigger.click();
        }
    }

    if (window.addEventListener) {
        // For standards-compliant web browsers
        window.addEventListener("message", displayMessage, false);
    } else {
        window.attachEvent("onmessage", displayMessage);
    }
</script>
<!-- PATCH: END -->

</body>
</html>

```

with such script in place it would be possible to have implementation on Angular front-end similar as below and have smooth switch between flows inside `iframe`:

HTML:

```auto
<iframe #noderedframe id="noderedframe" class="editor__frame" src="http://localhost:8000/red/" width="100%" height="768"></iframe>

```

Angular + TypeScript:

```auto
  @ViewChild('noderedframe') nodered: ElementRef<HTMLIFrameElement>;
...
  postMessageSelectedFlow(flowId: string) {
    this.nodered.nativeElement.contentWindow.postMessage(flowId.replace('.', '-'), 'http://localhost:8000');
  }

```

**ADDITIONAL PROPOSAL (OPTIONAL)**: extend node-red front-end with richer API in order to control its behavior inside `iframe`, for example: hide native tab-bar with flow names if it is implemented outside as in above scenario.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 July 2019 13:56 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/2 "2019-07-23T13:56:23Z")

</div>

Using the `editorTheme` setting you can add whatever custom scripts you want to the editor page. There is no need for us to build this security vulnerability into the default editor.

[https://nodered.org/docs/user-guide/runtime/configuration#editor-themes](https://nodered.org/docs/user-guide/runtime/configuration#editor-themes)

---

<div class="post-metadata">

**Author:** ![anatolyw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anatolyw/32/26648_2.png) [@anatolyw](https://discourse.nodered.org/u/anatolyw)\
**Post date:** [24 July 2019 07:06 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/3 "2019-07-24T07:06:35Z")

</div>

Sorry, don't see in `editorTheme` possibility for script injection. Which property should I use?  
Should I provide after that `editorTheme` as follow?

```auto
        const settings = {
            httpAdminRoot: '/red',
            httpNodeRoot: '/api',
            userDir: CONST_CONFIGURATION.node_red_user_dir,
            functionGlobalContext: {}, 
            editorTheme {
              // some property ?? for script injection
            },
        };

        // Initialise the runtime with a server and settings
        RED.init(server, settings);

```

Thank you in advance for your help.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [24 July 2019 07:20 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/4 "2019-07-24T07:20:39Z")

</div>

Sorry, didn't spot the example in the docs wasn't complete.

> **[node-red/node-red](https://github.com/node-red/node-red/wiki/Design%3A-Editor-Themes)**
>
> A visual tool for wiring the Internet of Things. Contribute to node-red/node-red development by creating an account on GitHub.

You want `editorTheme.page.scripts`

---

<div class="post-metadata">

**Author:** ![anatolyw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anatolyw/32/26648_2.png) [@anatolyw](https://discourse.nodered.org/u/anatolyw)\
**Post date:** [24 July 2019 07:23 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/5 "2019-07-24T07:23:38Z")

</div>

Ah, ok, make sense. Does this property support array with stings or should I provide its value as a comma separated string as "/abs\_path/script1, /abs\_path/script2"?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [24 July 2019 07:35 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/6 "2019-07-24T07:35:29Z")

</div>

Array of strings should do it

---

<div class="post-metadata">

**Author:** ![anatolyw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anatolyw/32/26648_2.png) [@anatolyw](https://discourse.nodered.org/u/anatolyw)\
**Post date:** [24 July 2019 07:39 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/7 "2019-07-24T07:39:18Z")

</div>

Ok, I have managed to inject my script and achieve desired behavior. What should we do with this request/discussion now? How to close it?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [24 July 2019 07:50 UTC](https://discourse.nodered.org/t/request-add-message-api-to-support-smooth-iframe-integration/13592/8 "2019-07-24T07:50:42Z")

</div>

We stop replying to it and let it fade away into the mists of time.