[发明专利]一种浏览器页面的显示方法及系统

说明书

【技术领域】

本发明涉及互联网的页面排版技术，尤其涉及一种浏览器页面的显示方法及系统。

【背景技术】

目前，浏览器页面的排版技术中，通过将页头和页脚的属性设置为固定，使得页头和页脚脱离文档，而悬浮于文档之上，不占用文档，使得页头和页脚不随滚动条而滚动；所述文档用于规定浏览器页面中显示内容在排版时占用的位置。浏览器页面中大部分显示对象的默认设置是静态，即页头和页脚不脱离文档，占用文档，属于文档的一部分，例如，图1是浏览器页面的结构示意图，如图1所示，浏览器页面中需要显示页头、内容、页脚；如果将页头和页脚设置为静态，将得到图2所示的真实页面，由于页头和页脚占用文档，文档的高度等于页头高度、内容高度和页脚高度的总和，文档的高度就超出浏览器窗体的高度，导致文档中的部分内容和页脚必须通过拖动滚动条滚动才能看到。为了解决这一问题，如图3所示，可以使得页头和页脚脱离文档，页头和页脚分别固定于浏览器窗体的顶部和底部，不作为文档的一部分，文档中仅包含内容，文档高度等于内容高度；如此，由于页头和页脚脱离文档，则对页面进行排版时，内容区域不再从页头所占位置的底端开始，而是从文档的起始位置开始，同理，页脚也不会位于内容末尾的位置，而是位于浏览器窗体的底端，此时，浏览器窗体高度等于文档高度，导致文档中部分内容被页头和页脚覆盖，无法显示，即使拖动滚动条至底端，页脚也依然覆盖部分内容。

目前，为解决图2和图3所示的问题，如图4所示，通常会设置内容的上边距和下边距，在内容前后留出等同页头高度和页脚高度的空白区域，使得展示的内容不被页头和页脚覆盖；但是这种方法必须预先获知页头高度和页脚高度；如果页头高度和页脚高度未知，且依然使用该方法，则需要针对每个浏览器页面设计对应的样式表，或在页面代码加载完毕后读取页头高度和页脚高度，然后根据页头高度和页脚高度重设内容的上边距和下边距，如此，必将产生额外的开发成本，且开发效率低下；开发完毕后，如果页头和页脚发生变更，也将增加维护成本。

此外，上述的浏览器页面的排版技术应用于计算机中比较常见，且实现方法非常简单，例如设置内容的高度固定、设置滚动条自动即可；但是，目前Android终端的浏览器中并不能支持这些简单的设置，这样就必须依赖第三方的JavaScript框架来解决问题，JavaScript框架在解决问题的同时，还将带来额外的资源开销，而且实现滚动的JavaScript框架中的iscroll框架在解决问题时，实现过程比较复杂，很容易与浏览器会发生冲突，从而导致整个浏览器的崩溃。

【发明内容】

本发明提供了一种浏览器页面的显示方法及系统，能够提高浏览器页面的开发效率，降低开发成本。

本发明的具体技术方案如下：

根据本发明一优选实施例，一种浏览器页面的显示方法，包括：

对预设的页面代码文件进行解析和渲染，得到显示的页面；所述页面包含第一页头、第一页脚和文档，所述文档包括第二页头、内容和第二页脚，所述第一页头和第一页脚的属性为不占用文档，所述第二页头和第二页脚的属性为占用文档。

上述方法中，在所述对预设的页面代码文件进行解析和渲染之前，该方法还包括：

复制页面代码文件中的第一页头代码和第一页脚代码，得到第二页头代码和第二页脚代码的页面代码文件；

其中所述第一页头代码和第一页脚代码中，第一页头和第一页脚的定位属性为固定，在第二页头代码和第二页脚代码中，将第二页头和第二页脚的定位属性设置为静态，所述定位属性为静态的第二页头和第二页脚占用文档。

上述方法中，所述复制页面代码文件中的页头代码和页脚代码为：

接收用户对原始页面代码文件中的第一页头代码和第一页脚代码分别进行复制后得到的第二页头代码和第二页脚代码。

上述方法中，所述复制页面代码文件中的页头代码和页脚代码为：

编译器根据输入的路径找到所述页面代码文件，所述页面代码文件中包含具有复制标识符的第一页头代码和第一页脚代码，在对所述页面代码文件进行编译时，依据所述复制标识符对所述第一页头代码和第一页脚代码进行复制得到第二页头代码和第二页脚代码。

上述方法中，该方法还包括：

在第二页头代码和第二页脚代码中，将第二页头和第二页脚的显示特性属性设置为隐藏；其中，所述显示特性属性为隐藏的第二页头和第二页脚不显示在浏览器窗体中。

上述方法中，所述对预设的页面代码文件进行解析为：