Support for navigating an embedded Grafana using postMessage

  • What Grafana version and what operating system are you using?
    >=8.0.0

  • What are you trying to achieve?

Embed grafana in an iframe and navigate to different dashboards programmatically from the outer web app without reloading the iframe content

  • How are you trying to achieve it?

Q: would you consider supporting such navigation via window.postMessage?

  • Details

Grafana can be nicely embedded into an iframe. Unfortunately, when changing the iframe src from one grafana dashboard to another the page is reloaded from scratch. It would be helpful to be able to navigate it by changing the react route. Due to same-origin restrictions, the general solution requires communicating between the parent and the iframe using window.postMessage.

Would you consider adding a simple onmessage hook in grafana to allow this? E.g. something like:

Parent:

 myIframe.contentWindow.postMessage('/d/4I6F42RRz/dashboard?kiosk&refresh=1m', '*');

Grafana:

window.onmessage = function(e){
   router.navigateByUrl(e.data)
};
2 Likes