一种页面高度自适应的方法及装置制造方法及图纸

本发明专利技术公开了一种页面高度自适应的方法及装置，涉及计算机视图领域，解决了无法在各种浏览器中实现页面高度自适应的问题。本发明专利技术的方法包括：为需要高度自适应的文档对象模型元素设置自定义属性；为所述自定义属性分配相应的属性值；根据所述属性值计算所述高度自适应的文档对象模型元素的高度。本发明专利技术主要用于在各种浏览器中自适应调整页面高度。

Method and device for adapting page height

The invention discloses a method and a device for adapting the height of a page, which relates to the field of computer vision. The method of the invention comprises: setting custom attributes for document object model elements need to be highly adaptive; for the custom attribute distribution of the corresponding attribute value; according to the value of the attribute document object model to calculate the elements of highly adaptive height. The invention is mainly used for automatically adjusting the height of the page in various browsers.

【技术实现步骤摘要】

本专利技术涉及计算机视图领域，特别是涉及一种页面高度自适应的方法及装置。
技术介绍
随着移动终端越来越普及，需要使原有的针对台式机的互联网网页能够适用于移动终端各种尺寸的屏幕，达到自动占满浏览器的高度和宽度以便将网页进行直观展示。为了达到上述目的，目前已经提出许多网页高度自适应技术，其主要实现方式有两种：1、使用CSS高度百分比实现网页高度自适应；2、使用CSS绝对布局实现网页高度自适应。虽然上述两种方式能够在一定程度上满足网页高度适应屏幕尺寸的需求，但是还会存在一些缺陷。例如：在使用CSS高度百分比实现网页高度自适应的方式中，通过设置页面中每个部分占据浏览器可视区域的百分比，设置后的网页高度只能适应一种屏幕大小的移动终端，当网页中部分元素高度固定，部分元素高度不固定时，无法通过设置高度百分比来适应各种屏幕大小的移动终端；而在使用CSS绝对布局实现网页高度自适应的方式中，虽然能够解决使用CSS高度百分比的方式存在的问题，但是该方式只能兼容Chrome浏览器、Firefox浏览器和IE9以上的浏览器。
技术实现思路
有鉴于此，本专利技术提出了一种页面高度自适应的方法及装置，主要目的在于解决无法在各种浏览器中实现页面高度自适应的问题。依据本专利技术的第一个方面，本专利技术提出了一种页面高度自适应的方法，包括：为需要高度自适应的文档对象模型元素设置自定义属性；为自定义属性分配相应的属性值；根据属性值计算高度自适应的文档对象模型元素的高度。依据本专利技术的第二个方面，本专利技术提出了一种页面高度自适应的装置，包括：设置单元，用于为需要高度自适应的文档对象模型元素设置自定义属性；分配单元，用于为设置单元设置的自定义属性分配相应的属性值；计算单元，用于根据分配单元分配的属性值计算高度自适应的文档对象模型元素的高度。借由上述技术方案，本专利技术实施例提供的页面高度自适应的方法及装置，能够为需要高度自适应的文档对象模型元素设置自定义属性，该自定义属性区别于现有技术中文档对象模型元素固定的高度属性，并根据页面可视区域的高度为所述自定义属性分配相应的代表文档对象模型元素高度的属性值，根据所述属性值动态计算高度自适应的文档对象模型元素的高度。与现有技术中使用CSS绝对布局实现网页高度自适应的方式存在的兼容性缺陷相比，本专利技术能够通过自定义属性动态分配和计算需要高度自适应的文档对象模型元素的高度，适应多种分辨率和多种类型的浏览器，解决了部分文档对象模型元素高度固定时，另一部分需要高度自适应的文档对象模型元素的高度百分比无法确定的问题。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了本专利技术实施例提供的一种页面高度自适应的方法的流程图；图2示出了本专利技术实施例提供的一种页面布局的示意图；图3示出了本专利技术实施例提供的一种页面高度自适应的装置的组成框图；图4示出了本专利技术实施例提供的另一种页面高度自适应的装置的组成框图。具体实施方式下面将参照附图更加详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。目前在大屏前端展示页面时多以图表展示为主，为了达到良好的展示效果，要求页面展示时在各种屏幕下都能够自动占满浏览器高度和宽度，所有内容能够直观地展示，不出现滚动条。目前有两种实现方式，其一、使用css高度百分比实现高度自适应；其二、使用css绝对布局来实现高度自适应。虽然上述两种方式能够在一定程度上满足网页高度适应屏幕尺寸的需求，但是还会存在一些缺陷。例如：在使用CSS高度百分比实现网页高度自适应的方式中，当网页中部分元素高度固定，部分元素高度不固定时，无法通过设置高度百分比来适应各种屏幕大小的移动终端；而在使用CSS绝对布局实现网页高度自适应的方式中，虽然能够解决使用CSS高度百分比的方式存在的问题，但是该方式只能兼容Chrome浏览器、Firefox浏览器和IE9以上的浏览器。为了解决无法在各种浏览器中实现页面高度自适应的问题，本专利技术实施例提供了一种页面高度自适应的方法，如图1所示，该方法包括：101、为需要高度自适应的文档对象模型元素设置自定义属性。通常在展示网页时，多采用文档对象模型来管理网页数据，文档对象模型中具有管理多个表单的表单集合，为了实现对浏览器打开的网页进行监视、操作、动态提取用户输入、动态修改等功能，都需要遍历网页表单中的表单域(也叫文档对象模型元素)并读取这些表单域的属性。其中，存在一个高度属性，用于设置文档对象模型元素的高度(也就是网页中段落的高度)，所有主流浏览器都支持该高度属性。这个高度属性定义元素内容区的高度。通常情况下，该高度属性可以定义高度固定的文档对象模型元素的高度，也可以规定其继承父元素高度属性的值。但是对于屏幕尺寸变化或需要页面高度自适应的文档对象模型元素而言，无法保证页面展示时在各种屏幕下都能够自动占满浏览器的高度。由于需要高度自适应的文档对象模型元素不能存在与高度固定的文档对象模型元素相同的固定的高度属性，因此，本专利技术实施例在加载页面中文档对象模型元素时，可以为需要高度自适应的文档对象模型元素设置自定义属性，该自定义属性是在编码时专门针对需要高度自适应的文档对象模型元素定义的，用于定义每个高度自适应的文档对象模型元素的高度占比，该自定义属性的值可以进行动态设置，用于动态表示高度自适应的文档对象模型元素的高度情况。102、为自定义属性分配相应的属性值。当为页面中需要高度自适应的文档对象模型元素设置自定义属性后，可以根据页面可视区域的高度来指定页面中各个文档对象模型元素(即页面中各个部分)的高度，其中，对于高度固定的文档对象模型元素而言，可以为其指定具体的高度值，而对于高度自适应的文档对象模型元素而言，就需要针对各个高度自适应的文档对象模型元素分别指定各自的属性值，但是只需要所有文档对象模型元素的高度总和不超过页面可视区域的高度，同时其高度总和等于页面可视区域的高度即可在页面展示时能够自动占满浏览器的高度。为了达到高度自适应的目的，因此本专利技术实施例的步骤102中自定义属性的属性值不能像固定高度属性的属性值那样设置成具体的数值，而需要将自定义属性的属性值设置成一种代表高度关系的数值。103、根据属性值计算高度自适应的文档对象模型元素的高度。由于在步骤102中为需要高度自适应的文档对象模型元素的自定义属性分配了相应的属性值，并且该自定义属性的属性值代表高度自适应的文档对象模型元素与页面的高度关系，因此在步骤103中可以根据该自定义属性的属性值计算高度自适应的文档对象模型元素的高度。本专利技术实施例提供的一种页面高度自适应的方本文档来自技高网...

【技术保护点】
一种页面高度自适应的方法，其特征在于，所述方法包括：为需要高度自适应的文档对象模型元素设置自定义属性；为所述自定义属性分配相应的属性值；根据所述属性值计算所述高度自适应的文档对象模型元素的高度。

【技术特征摘要】
1.一种页面高度自适应的方法，其特征在于，所述方法包括：为需要高度自适应的文档对象模型元素设置自定义属性；为所述自定义属性分配相应的属性值；根据所述属性值计算所述高度自适应的文档对象模型元素的高度。2.根据权利要求1所述的方法，其特征在于，所述为需要高度自适应的文档对象模型元素设置自定义属性，包括：在编码页面可视区域中文档对象模型元素时，以自定义属性的方式为需要高度自适应的文档对象模型元素增加自适应高度属性。3.根据权利要求1所述的方法，其特征在于，所述为所述自定义属性分配相应的属性值，包括：根据高度自适应的文档对象模型元素的个数确定各个自定义属性的属性值。4.根据权利要求1所述的方法，其特征在于，所述根据所述属性值计算所述高度自适应的文档对象模型元素的高度，包括：获取页面可视区域的高度以及高度固定的文档对象模型元素的高度；根据所述属性值并结合所述页面可视区域的高度以及所述高度固定的文档对象模型元素的高度计算所述高度自适应的文档对象模型元素的高度。5.根据权利要求4所述的方法，其特征在于，获取高度固定的文档对象模型元素的高度，包括：遍历页面可视区域中文档对象模型元素的高度属性，读取具有固定高度属性的文档对象模型元素的高度...

【专利技术属性】
技术研发人员：周建涛，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：北京;11