iframe嵌套跨域grafana,前端如何自定义隐藏模块

莹宝思密达

已于 2022-10-24 17:21:12 修改

阅读量2.8k

点赞数

分类专栏： JScor 文章标签： grafana iframe 1024程序员节

于 2022-10-24 17:19:38 首次发布

本文链接：https://blog.csdn.net/miin_ying/article/details/127496478

版权

JScor 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

问题：grafana 通过 kiosk=tv 或 kiosk 设置的模式并不能完全满足开发需求。如图现在我们需要将红色框出的功能全部隐藏，但保留时间、缩小区域、刷新频率的功能。从图一转变为图二的样子

图一

图二

解决方式：修改grafana代码和本地代码。我们这里grafana是直接使用的window的包，代码结构如图

修改本地代码，其中my-iframe是grafana的容器

document.getElementById('my-iframe').onload = function(){
	document.getElementById('my-iframe').contentWindow.postMessage({showMenu:false},'*')
};

修改 grafana/public/views/index.html,添加如下代码

    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
      if (event.data.showMenu === false) {
        if (document.querySelector('sidemenu')) {
          document.querySelector('sidemenu').style.display = 'none';
        }
        var str_css = ".sidemenu{display:none} .navbar-buttons--actions{display:none} .navbar-page-btn{display:none} .navbar-button--tv{display:none}";
        var style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = str_css;
        document.getElementsByTagName("HEAD").item(0).appendChild(style);
      }
    }

其中 str_css 就是想要隐藏的元素的css