站建设培训学校,坡头网站建设公司,公司变更法人,重庆网站建设注意事项文章目录 #x1f4da;嵌入方式#x1f4da;图表加载显示#x1f4da;100%嵌入及滑动条问题#x1f4da;加载动画保留 前情提要#xff1a; 计划用iframe把画好的home1.html#xff08;echarts各种图表组成的html数据大屏#xff09;嵌入整合到index.html#xff08;搭… 文章目录 嵌入方式图表加载显示100%嵌入及滑动条问题加载动画保留 前情提要 计划用iframe把画好的home1.htmlecharts各种图表组成的html数据大屏嵌入整合到index.html搭的可视化作业框架里。再具体一点说就是把home1.html用iframe框架标签放到到li.home1里。 嵌入方式 直接用iframe标签li classhome1iframe srchome1.html/iframe /li图表加载显示 在嵌入时出现了图表不显示的问题解决方法 将绘图js里涉及到的myChart.setOption(option);全部改为if (option typeof option object) {myChart.setOption(option); } window.addEventListener(resize, myChart.resize);以上代码设置 ECharts 图表的选项和监听浏览器窗口大小变化时自动调整图表大小。 ​option typeof option object​这个条件的作用是判断 ​option​ 是否存在且是一个对象类型。 如果条件成立说明 ​option​ 是一个有效的选项对象那么接下来的操作才会执行。这个条件的目的是确保不会在 ​option​ 不存在或者不是对象类型时运行 ​myChart.setOption(option)​ 报错。 通过 ​window.addEventListener(resize, myChart.resize)​ 给浏览器窗口的 ​resize​ 事件添加了一个监听器当窗口大小发生变化时会自动调用 ​myChart.resize​ 方法即重新调整图表的大小使其适应新的窗口尺寸。 100%嵌入及滑动条问题 给iframe设置样式iframe srchome1.html stylewidth: 100%; height: 100%;/iframe。出现了不想要的滑动条 我这里的解决办法是把home1.html原页面的height改小一点点。把height: 100vh;改为height: 96vh;嵌入后滑动条消失。 加载动画保留 本来图表加载是会有初始动画的柱形图生成折线图生成等等但是现在iframe嵌入直接一步到位了而重新加载框架时又会出现动画。 考虑以下方法保留初始加载动画。 给iframe标记idiframe idmyIframe srchome1.html stylewidth: 100%; height: 100%;/iframe。在js的window.onload function ()里添加var iframe document.getElementById(myIframe); iframe.contentWindow.location.reload();通过 ​iframe.contentWindow​ 获取到了 ​iframe​ 的窗口对象。这个窗口对象提供了对嵌入的文档的访问和操作。调用 ​location.reload()​ 方法重新加载 ​iframe​ 中的页面。这个方法会导致 iframe 内部文档的全部重新加载。