[发明专利]数据可视化大屏展示页面自适应排版和刷新的方法及装置

说明书

数据可视化大屏展示页面自适应排版和刷新的装置涉及信息技术领域。本发明采取页面展示元素自适应浏览器的可视化区间的大小的自适应方法，重新排版的触发方式采用页面刷新的方式，通过浏览器类型检测器，浏览器状态检测器，大屏参数检测器采集的信息由浏览器状态判断器判断出浏览器状态，在根据浏览器的不同状态采取不同的页面刷新方式，有效的控制了页面的刷新频率，杜绝了由于浏览器状态切换使大屏展示信息丢失或用户输入信息丢失现象。

技术领域

本发明涉及信息技术领域，尤其是软件开发领域。

背景技术

数据可视化页面有一个重要的分支即专门在一些专业设备上展示的页面，业内称之为大屏展示页面简称大屏页面。这类大屏页面展示的环境往往是高清的投影仪，或者是LED屏幕，或者是类似影院的巨幕环境下。

这种大屏页面在设计和开发中有着自身独有的特点，这些特点总结如下：

相关定义：浏览器的可视区间即浏览器展示内容的区间，可视区间不包含浏览器的地址栏、工具栏和滚动条这些元素。

特点1：浏览器展示大屏页面，大屏的内容往往会占满整个浏览器的可视区间，大屏页面不能出现垂直和水平的滚动条；

特点2：大屏页面需要自适应屏幕的功能，这样能保证大屏页面不同类型的展示介质下都能保证正确并且美观的展示效果。

由以上两个特点，大屏的技术实现上会有如下技术要求，具体如下：

要求1：大屏页面要禁止滚动条的出现

要求2：大屏页面需要获取浏览器可视区间的宽度和高度，大屏的内容展示都以此可视区间的大小来进行排版布局以及相关内容展示的编排；

要求3：需要动态监测浏览器可视化区间宽高的方法，当发现浏览器可视化区间大小发生变化后，页面执行重排页面的方法，让页面的展示内容根据实际可视化区间的宽度和高度进行重新布局。

在业界解决浏览器固定可视化区间的方法基本都是统一的，即使用css技术对于页面的body元素进行样式控制；Overflow属性值为hidden，让body元素在水平和垂直方向都禁止使用滚动条。有些场景下页面还会在body元素上设置width和height都为100%，这样就使得浏览器的可视区间进一步限制宽度和高度。

关于页面自适应页面可视化区间的技术手段，页面一般都是使用页面window下的onresize事件，onresize事件在浏览器的宽度和高度发生1px的变化都会被成功触发。

页面监测到浏览器宽度和高度变化后，页面就需要调用onresize的回调函数将页面的展示元素进行重新排版布局，页面重新排版技术是页面整个自适应的技术难点所在，本发明人收集业界的处理方法汇总下来大致有两种方案，具体如下：

方案1：当页面被通知要执行页面重新布局操作后，开发人员会将页面每一个需要重排的元素都进行重新的排版布局操作。该方案功能实现起来特别的繁琐和复杂，研发人员需要非常细致的梳理出页面每个需要重新排版布局的元素，大到页面里比较显眼的用于排版布局的容器，小到一个标题甚至一个小图标都要进行重新的排版布局，如果碰到页面使用不同类型的排版布局技术，那么页面重排还需要兼容排版布局的差异性，采用此方案会让页面里存在大量专门用于页面自适应的代码，这也导致整个页面的代码变得臃肿，代码的健壮性和可维护性都大大的降低。因此在实际生产应用中，该方案基本都是做有限的大屏自适应操作即保证重要的排版布局进行重排，细微的展示元素往往会被忽略。不过该方案有一个优势，这个优势就是页面的重新排版布局操作不需要重新刷新页面，这也是该方案虽然繁琐，但是任然被广泛使用的一个重要原因。