Matebase是一个开源,易上手的BI工具,这里不做太多介绍了。

官网地址:https://www.metabase.com/

解决问题描述:

使用iframe内嵌Metabase公开链接之后,页面样式不美观:

1、Metabase默认有背景色,背景的高度不会因为开启了滚动条就适应高度。

2、如果不成为Metabase的付费用户,所使用的的公开连接左下角会有Powerd by Metabse。(违反Metabase开源约定)

解决方案描述:

此方案能够生效,前提是iframe里面的链接不能跨域,跨域将无法获取iframe内的元素高度。

1、在页面完成渲染之后,获取iframe内的元素高度,动态为iframe设置样式高度。

2、监听浏览器窗口的尺寸变化,动态更新iframe的高度设置(如果单纯变化宽度,此时iframe不会自动增高,没找到宽度跟高度的对应关系,有兴趣你可以自己研究一下)

3、监听左侧菜单导航栏的宽度变化:本项目中,左侧菜单导航栏可以收缩,最小宽度为54px,最大210px。需要根据实际进行调整

使用Matebase构建完成自己的仪表盘之后,点击分享并编辑按钮:

如果什么都不做呢,Matebase显示样式会很难看。如下图:

接下来介绍一下样式优化方案:

1、iframe样式设置如下:

<iframe
id="bdIframe"
ref="myIframe"
src="http://localhost/matebase/public/dashboard/6f47b37b-0f86-4dad-822d-d69440ffe5e2" frameborder="0"
style="width:100%;height: 100%;"
allowtransparency
scrolling="no" ></iframe>

2、iframe高度自适应:

let _this = null;

export default {
name: 'DashboardEditor',
data() {
},
created() {
_this = this;
},
mounted() {
_this = this;
this.adaptIframeHeight();
window.onresize = () => {
const oIframe = document.getElementById('bdIframe');
try {
let iDoc = oIframe.contentDocument || oIframe.document || oIframe.contentWindow;
let cHeight = Math.max(iDoc.body.clientHeight, iDoc.documentElement.clientHeight);
let sHeight = Math.max(iDoc.body.scrollHeight, iDoc.documentElement.scrollHeight);
console.info("cHeight=" + cHeight + ", sHeight=" + sHeight);
let height = Math.max(cHeight, sHeight);
oIframe.style.height = height + 'px';
// 隐藏 Power By MetaBase
// let footerDiv = iDoc.getElementsByClassName("EmbedFrame-footer");
// if (footerDiv[0] !== undefined) {
// footerDiv[0].style.display = 'none';
// }
} catch (e) {
console.error("窗口大小变化时,iframe高度自适应异常!" + e);
oIframe.style.height = '1000px';
}
};
try {
const erd = elementResizeDetectorMaker();
let sidebarWidth = null;
// 监听左侧导航栏的宽度变化
erd.listenTo(document.getElementsByClassName("sidebar-container"), (element) => {
sidebarWidth = element.offsetWidth;
_this.$nextTick(() => {
let addHeight = 210;
// 导航栏收缩最小的时候,加大iframe的高度
if (sidebarWidth === 54) {
const oIframe = _this.$refs.myIframe;
if (undefined !== oIframe) {
console.info(oIframe);
let oldHeight = oIframe.style.height;
if (undefined !== oldHeight && oldHeight !== '100%') {
oIframe.style.height = (Number(oldHeight.replace("px", ""))) + addHeight + 'px';
}
}
}
// 导航栏伸展到最大时,减少iframe的高度
if (sidebarWidth === 210) {
const oIframe = _this.$refs.myIframe;
if (undefined !== oIframe) {
console.info(oIframe);
let oldHeight = oIframe.style.height;
if (undefined !== oldHeight && oldHeight !== '100%') {
oIframe.style.height = (Number(oldHeight.replace("px", ""))) - addHeight + 'px';
}
}
}
})
})
} catch (e) {
console.error("监听左侧导航栏宽度变化异常!" + e);
}
},
methods: {
adaptIframeHeight() {
const oIframe = document.getElementById('bdIframe');
oIframe.onload = () => {
try { // iframe高度自适应
let iDoc = oIframe.contentDocument || oIframe.document || oIframe.contentWindow;
let cHeight = Math.max(iDoc.body.clientHeight, iDoc.documentElement.clientHeight);
let sHeight = Math.max(iDoc.body.scrollHeight, iDoc.documentElement.scrollHeight);
let height = Math.max(cHeight, sHeight);
oIframe.style.height = height + 'px';
// 隐藏 Power By MetaBase
// let footerDiv = iDoc.getElementsByClassName("EmbedFrame-footer");
// if (footerDiv[0] !== undefined) {
// footerDiv[0].style.display = 'none';
// }
} catch (e) {
console.error("iframe高度自适应异常!" + e);
oIframe.style.height = '1000px';
}
};
}
}
}

解决这个问题耗费了好久,所以记录一下。希望能帮到遇到类似问题的同学,加油~

MetaBase使用iframe内嵌到Vue页面样式优化的更多相关文章

  1. 如何根据iframe内嵌页面调整iframe高宽续篇

    接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...

  2. Python3.x:selenium获取iframe内嵌页面的源码

    Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...

  3. 关于selenium自动化对iframe内嵌元素的处理

    今天上班闲来无聊,于是来练练自动化,结果碰上了可恶的iframe,楼主,以前也遇到过,但是一直也没搞懂怎么处理的,都是抄别人的代码,今天决定独立解决试试.首先先来认识什么是iframe,它就长下图这样 ...

  4. HTML+CSS教程(二)frameset框架和iframe内嵌

    一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...

  5. 在iframe内页触发顶层页面body的blur事件

    //在iframe内页触发顶层页面body的blur事件. if (window != top) { $(document.body).click(function () { $(top.docume ...

  6. 如何根据iframe内嵌页面调整iframe高宽

    问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置ifram ...

  7. iframe内嵌页面——跨域通讯

      <template> <div class="act-form"> <iframe :src="src" ref=" ...

  8. vue页面性能优化方案

    个人在项目中用到的页面性能优化的方式总结. 一.均衡页面加载文件的大小和数量 1.项目中小图片图片转base64,通过工具如webpack进行图片压缩,文件进行压缩混淆等 2.vue-router 懒 ...

  9. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

随机推荐

  1. 惊艳面试官的 Cookie 介绍

    Cookie 是什么 Cookie 是用户浏览器保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie 主要用于以下三个方面: 会话状态管理(如用户登录 ...

  2. 开关电源(1)之BUCK降压变换器工作原理及Multisim实例仿真

    开关电源(Switching  Mode  Power  Supply)即开关稳压电源,是相对于线性稳压电源的一种的新型稳压电源电路,它通过对输出电压实时监测并动态控制开关管导通与断开的时间比值来稳定 ...

  3. 《吃透微服务》 - 服务容错之Sentinel

    大家好,我是小菜. 一个希望能够成为 吹着牛X谈架构 的男人!如果你也想成为我想成为的人,不然点个关注做个伴,让小菜不再孤单! 本文主要介绍 SpringCloud中Sentinel 如有需要,可以参 ...

  4. Nginx报400 Bad Request

    本地遇到此问题,关闭浏览器,重新运行代码即可

  5. Redis的数据类型以及应用场景

    1. Redis的作用 1.1 Redis可以做什么 1.缓存:缓存机制几乎在所有的大型网站都有使用,合理地使用缓存不仅可以加快数据的访问速度,而且能够有效地降低后端数据源的压力.Redis提供了键值 ...

  6. 12.10File类

    要点提示:File类包含了获得一个文件/目录的属性,以及对文件/目录进行改名和删除的方法. 在文件系统中,每个文件都存放在一个目录下.绝对文件名,是由文件名和它的完整路径以及驱动器字母组成.例如,c: ...

  7. 基于socket通信的javaDH通信实现

    基于socket通信的javaDH通信实现 https://files.cnblogs.com/files/blogs/692137/DH.rar

  8. Raspberry Pi:树莓派开发板配置USB启动系统

    准备材料 树莓派4B U盘 TF卡 树莓派基础镜像2020-08-20稳定版(这个系统是必须的并拷录在TF卡) Kali树莓派系统(这个是我想要学习的系统,大家可以准备自己的系统,拷录在U盘的) SD ...

  9. Ha1cyon_CTF-公开赛(wp)

    一.babyasm 00007FF7A8AC5A50 push rbp 00007FF7A8AC5A52 push rdi 00007FF7A8AC5A53 sub rsp,238h 00007FF7 ...

  10. asp.net mvc中的安全性

    1.重复提交攻击:通过Bind特性指定要绑定和不绑定的值. 2.Cookie盗窃:阻止脚本对站点中Cookie的访问,webconfig文件中添加<HttpCookies domain=&quo ...