Dashboard menu auto hide if loaded in iframe

This is a ui-template that allows to hide the toolbar and its menu for dashboard pages that are embedded in another website as an iframe. This allows to keep seeing the menu when accessing the dashboard directly while limiting the access of pages for other users.

[{"id":"c8bb2c66.278d3","type":"ui_template","z":"d74b3100.01243","g":"b57d5d08.e63f2","group":"3164df7f.9ac62","name":"Iframe detect menu auto hide","order":4,"width":0,"height":0,"format":"<script>\nif (window.top!=window.self){\n    // In a Frame or IFrame\n    document.body.classList.add('iframed')\n}\n</script>\n\n<style>\n  .iframed #toolbar {\n    display: none;\n  }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1180,"y":820,"wires":[[]]},{"id":"3164df7f.9ac62","type":"ui_group","name":"Rack 1","tab":"585464c.c83a69c","order":1,"disp":true,"width":"6","collapse":false},{"id":"585464c.c83a69c","type":"ui_tab","name":"Temperature-Humidity Sensor","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Flow Info

Created 4 years, 10 months ago
Rating: 5 1

Owner

Actions

Rate:

Node Types

Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • dashboard
  • ui-template
  • menu
  • hide
  • toolbar
  • iframe
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option