# Determining Flow ID for the Editor to render flows in iframe

**URL:** <https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677>\
**Category:** General\
**Tags:** editor\
**Created:** [7 November 2023 09:41 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677 "2023-11-07T09:41:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shan](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@Shan](https://discourse.nodered.org/u/Shan)\
**Post date:** [7 November 2023 09:41 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/1 "2023-11-07T09:41:23Z")

</div>

Hi,

I have been able to embed the nodered editor in a react application using `iframe` and overcome the cross-origin problems by serving the UI behind a reverse proxy. In order to preserve the _state_ of the flows to be rendered in the UI, I am looking to obtain the flow ID which is generally as follows:

```
http://<nodered>/nodered/#flow/<ID>

```

in my case.

There is no API that just is able to list the current flow IDs and wanted to know if there is a way of of getting some value to the `iframe` so that changes made in a node-red editor may be updated when the user moves on to other UI components and comes back to the embedded iframe for the node-RED editor

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [7 November 2023 10:08 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/2 "2023-11-07T10:08:13Z")

</div>

Without knowing your setup, can you not just use the iframe location?

```auto
const flowID = document.getElementById("iframe_id").contentWindow.location.hash.split("/")[1]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f36b65a40ae19ced37057562fa6fdcc370a21007.png)

---

<div class="post-metadata">

**Author:** ![Shan](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@Shan](https://discourse.nodered.org/u/Shan)\
**Post date:** [7 November 2023 10:56 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/3 "2023-11-07T10:56:43Z")

</div>

@marcus-j-davies  
In my case the `iframe` in the code is as follows:

```html
<iframe
  id="app-container"
  src={iframeSourceUrl}
</iframe>

```

`iframSourceUrl` is set to `http://127.0.0.1:1880/nodered`.

The problem is `contentWindow.location.hash` is not obtaining the suffix of the url i.e., `#flow/<id>` part. In the browser, on a tab where Node-RED editor exists, I can obtain the value using `contentWindow.location.hash` as you mentioned.

But the value is not propagated back to the parent from the `iframe`.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 November 2023 11:13 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/4 "2023-11-07T11:13:37Z")

</div>

Does this question on SO help at all?

> <https://stackoverflow.com/questions/938180/get-current-url-from-iframe/938195#938195>

---

<div class="post-metadata">

**Author:** ![Shan](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@Shan](https://discourse.nodered.org/u/Shan)\
**Post date:** [7 November 2023 11:21 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/5 "2023-11-07T11:21:52Z")

</div>

not really.

I tried setting a browser debugger on the iframe itself but it only ever returns the value of the url set previously `http://127.0.0.1:1880/nodered` and the value of the `hash` paramter is empty

 ![MicrosoftTeams-image (2)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/68f8137ac9a2cab9d89831381c540a5cebedc50b.png)

Value by the debugger

 ![MicrosoftTeams-image (3)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/775365bc6bd5734a6fad1ec00a7844b0b14528cb.png)

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [7 November 2023 11:34 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/6 "2023-11-07T11:34:33Z")

</div>

Ok,

The reason for this, is that the "document" in the frame doesn't actually change, the URL change is just trickery - as the editor uses the `history` API to set what is displayed in the URL, and doesn't actually "load" it. (I think)

You can witness this your self.

Open up the browser network log, and change flow tabs - you will see no request is actually made to the new URL - therefore the iframe is still "looking" at the original URL.

The editor uses web sockets to display different flows.

With all that in mind, check if you can access the `history` object of the iframe - you can then potentually pull the current state

The `history` API is what also sets (without loading) the URL

[History API - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/History_API)

[History: state property - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/History/state)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 January 2024 11:34 UTC](https://discourse.nodered.org/t/determining-flow-id-for-the-editor-to-render-flows-in-iframe/82677/7 "2024-01-06T11:34:48Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.