Determining Flow ID for the Editor to render flows in iframe

[Shan]

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

[marcus-j-davies]

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

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

[Shan]

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

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

[TotallyInformation]

Does this question on SO help at all?

Get current URL from IFRAME

[Shan]

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

Value by the debugger

[marcus-j-davies]

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)

History: state property - Web APIs | MDN (mozilla.org)