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:
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
Without knowing your setup, can you not just use the iframe location?
const flowID = document.getElementById("iframe_id").contentWindow.location.hash.split("/")
In my case the
iframe in the code is as follows:
iframSourceUrl is set to
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
Does this question on SO help at all?
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
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
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)