G06F16/958 G06F8/76 G06F8/38
1.基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,包括跨浏览器网页兼容性自适应标准化和超文本5关键新特征兼容性标准化方法,跨浏览器网页兼容性自适应标准化包括超文本5统一化标准、基于文档对象模型标准的重建,超文本5关键新特征兼容性标准化方法包括Audio与Video元素、服务器发送事件、高级表单元素兼容标准化;
超文本5统一化标准包括九个方面:一是规范引进文件,二是统一命名规则,三是采用正确无误的文档类型,四是不省略、
和标签,五是正确设置head内容,六是关闭所有超文本元素,七是图片提供备选方案,八是恰当换行和缩进,九是属性值采用引号;超文本5编码标准保持超文本5代码风格统一,本发明超文本5统一化标准具体为:
一是规范引进文件,超文本、images、CSS、JS文件归档到协定目录中,省略外链资源URL协议,减少文件字节数,链接资源时采用相对路径,避免文件夹层级过多过深;
二是统一命名规则,超文本5采用统一的命名规则,文件名、属性名、元素名采用大写或者小写字母;
三是采用正确无误的文档类型,必须先明确声明超文本发明档类型,使Web浏览器通过判别文档决策解析器与渲染类型是否切换到对应的超文本5模式,避免浏览器进入混杂模式;DOCTYPE声明为<!DOCTYPE html>或<!doctype html>,不区分大小写;
四是不省略、
和标签,超文本标签表达页面语言:,超文本声明lang属性,明确指定页面中所用的自然语言,方便屏幕阅读器与搜索引擎,省略标签或者标签在文档对象与XML软件中会崩溃,省略标签在旧版浏览器下会发生致命错误,默认标签之前的内容被浏览器添加到一个默认的标签上,但是不省略head元素;五是正确设置head内容,超文本5中
html5media.js便能够在IE8,甚至更旧的IE6浏览器下采用Audio与Video标签。
6.根据权利要求1所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,服务器发送事件兼容标准化采用腻子脚本技术,利用提供的JavaScript库来规避浏览器差异,只需加载第三方JS库到网页中,无需改动应用本身的客户端代码;
解决微软公司浏览器下XMLHttpRequest对象不兼容问题,需采用IE8中引进XDR对象,XDR对象对象提供onprogress事件,当事件触发时,响应内容通过responseText属性获得,采用XDR对象打开和服务器的连接后,当服务器出现新数据时,通过XDR对象里事件onprogress进行处理,采用XDR对象限制严格,这些限制影响XDR作为EventSource对象的实现,具体的限制和解决办法包括:
一是XDR对象发送的请求里不包括任何和用户认证有关的信息,包括cookie,若服务器端必须认证,通过HTTP请求的其它方式传递用户认证信息;
二是服务器端响应需包含头,声明该URL地址允许来自哪些域的访问,“*”表明可来自于任何域的访问,本发明采用和当下应用相同的域,限制只能够从当前域访问;
三是XDR对象发送请求不可以包括自定义的HTTP头,限制不能采用“Last-Event-ID”头声明最近一次客户端接收到的事件标识符,只允许采用HTTP请求的其他方法传递此标识符;
四是XDR对象请求的内容类型Content-Type只能是“text/plain”,表明POST请求方式,服务器端引进的框架不会自适应解析其内容,采用HttpServletRequest类的getParameter方法无法获取POST请求的内容,只能在服务器端解析原始请求的内容,获得其中参数的值。
7.根据权利要求6所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,XDR对象的一系列限制,服务器端也作对应修改,包括头的返回、请求中用户认证信息的处理、浏览器发出的“text/plain”类型参数的解析;
本发明采用的腻子脚本库是GitHub上开发的开源项目EventSource,将EventSource项目中eventsource.js文件作为腻子脚本,下载并放到网页所在的文件夹内,在head标签中引进该文件,编写相关代码;
页面运行结果还会随着时间继续向下延伸,采用腻子脚本库,对应更改服务器端的实现后,就能在IE8及以上以及Edge浏览器下采用超文本5的服务器推送事件。
8.根据权利要求1所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,高级表单元素兼容标准化解决url、password、number、email几种输入存在的问题,实现跨浏览器的超文本5表单验证,本发明采用表单验证插件checkValidity.js,具体为:
一是支持中英文切换,checkValidity.js插件还支持双语网站切换中英文;
二是统一UI,该插件首先统一界面,模拟Chrome浏览器的效果,界面样式与位置显示统一,且能够自定义,对于提示信息,提供是否采用浏览器默认提示文字的选项,若不采用则自定义内容;
三是支持异步验证,支持异步验证是功能强大;
四是支持多种类型的规则验证,checkValidity.js插件可支持多种类型的验证规则,包括必填项、格式或者自定义。
9.根据权利要求8所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,checkValidity.js插件的运用具体为:
第1步,编写form的html结构;
第2步,具有html结构之后,再初始化插件:
执行new From时传入三个参数,分别为表单的文档对象元素、验证规则中的配置、验证成功后的回调函数,其中checkOpt的errorMsgClass和errorInputClass二个属性用作自定义样式,上述初始化的操作,实现required和pattern属性及类型校验生效,属性pattern采用了正则表达式,其错误提示内容放在自定义的pm属性中。
本发明涉及一种跨浏览器网页兼容标准构建方法,特别涉及基于超文本5的跨浏览器网页兼容标准构建方法,属于网页兼容标准技术领域。
超文本5时代的到来将Web技术推向了高峰,互联网深入到了每个现代人的生活中。网络化服务作为越来越受欢迎的服务方式,是日常生活和工作中不可或缺的部分。更多企业或者组织也认识到网络的强大功能,能够在Web上实现与全球各地的客户开展商务活动等。浏览器是人们获得网络服务的窗口,网页兼容性是采用者最先遇到、最容易碰到以及急切想要解决的问题。对于企业与相关组织而言,页面如果只能在特定浏览器中正常显示,肯定不能够满足不同用户的需求,导致的结果必然是减弱企业或者组织的自我竞争力,在开放的国际化路线上难以打开局面。当前,超文本5已成为各大互联网企业的重要标准。超文本5不仅能够表现网页内容,另有很好的跨平台性,可将Web技术带入极广阔的生态平台。超文本5是万维网联盟公开推出的互联网新版本Web标准,采用超文本5标准,页面变得更加丰富,能够实现更多的功能,开发人员只需编写同一页面,适配工作就能交给浏览器去完成。超文本5元素体系丰富,能替代复杂的插件,极大的降低Web技术开发成本。同时,超文本5具有开放性,不会被任何一家组织或者企业垄断,利于促进整个互联网行业的良性发展。借助超文本5的跨平台性,手机浏览器能通过流量入口变成平台。超文本5的设计目的,一是声明文档类型简单而优秀,二是代码语义化,三是能够本地存储与离线缓存,四是更简单地实现多媒体应用,五是网页自适应获取来自服务器的更新,六是更好地录入表单数据。
整体来看,全球主流互联网公司均已进军超文本5技术,通过不同的方式探索将超文本5为其所用,在推进、验证、兼容、纠错、再推进中不断迭代。然而,当前超文本5各技术在不同浏览器下的表现仍然很不一样。超文本5是新版本的超文本标记语言,超文本5基于超文本4进行了大量修改,新增和改良了一些元素、属性和行为,同时增加了一系列功能更强的技术,用作让Web站点及应用更加多样化。超文本发明至今,逐渐成为一种行业标准。
虽然超文本5标准的许多特征极具革命的性质,但并不意味着采用超文本4创建的网站必须重新创建,超文本5在于进化而并非革命,它的核心理念是保持所有新特征的平滑过渡,向后兼容。超文本5建立了一些规则,例如新特征应该以CSS、HTML、文档对象和JavaScript为基础,减少依赖外部插件,更高效处理错误的方式,更丰富表达脚本的元素,超文本5应不限于设备或者平台,开发进程应公开透明等。
但超文本5技术越来越受到青睐,其跨浏览器碎片化的问题越受到明显,使开发和使用人员受到严重困扰。碎片化是操作系统或者浏览器有许多版本,彼此间有差异,致使网页在不同平台或者浏览器下无法正常应用。当前超文本5网页在不同浏览器下的表现差异非常大,浏览器行业还缺少必要的统一扩展标准。由于超文本5最大的优势是能够实现在全部平台上同一应用正常使用,降低开发者的工作量,碎片化问题对支持跨平台应用的超文本5是非常大的障碍。
经过多年的发展,超文本5实现了越来越多的功能。但对于超文本5网页的表现形式,现有技术浏览器和操作系统等相关开发商并不统一。若要达到W3C规划的理想状态,使超文本5成为互联网行业遵循的标准,使不同用户体都能体验到超文本5标准,解决超文本5页面跨浏览器的兼容性便极为重要。解决超文本5跨浏览器碎片化问题,超文本5前景非常广阔。然而,虽然在应用开发与平台上超文本5有很大的优势,但对于移动平台上用户而言,超文本5的价值仍有待验证,用户体验方面还不非常成熟,超文本5进一步的发展还需要芯片、各种浏览器、操作系统以及Web应用开发商等一同努力。
现有技术超文本5标准的全部功能并不能在所有浏览器下实现,实现超文本5完全被支持还需要很长时间。当前重要的是哪些标准和技术能真正采用在用户浏览器上。若超文本5被当前所有主流浏览器完全支持,并且所有用户都采用升级后的浏览器,插件又将会受到来自超文本5技术的沉重打击。
尽管超文本5技术不断更新和完善,应用也有了一定规模,但具体的实现过程中也还存在一些较大且实际的阻碍。除上述问题外,针对现有技术存在的部分缺点,本发明拟解决以下问题:
一是兼容性,超文本5的新特征很多,但很多设备、不同浏览器对所有新特征不都能很好的支持,一些常见的浏览器不支持超文本5的部分新特征,导致用户在不同浏览器下的体验不一致,部分浏览器下的体验很不好,严重制约了超文本5的发展。解决该问题会极大的增加开发人员的工作量,需要反复测试。
二是性能和安全性,超文本5的性能与原始APP还有明显差距。移动平台上,超文本5的性能与速度也需提高。超文本5是开放环境里显示内容的网页标准,安全性上会带来网页内容不好保护的问题,尤其对开发超文本5游戏的公司,经常会碰到游戏上线没几天就被复制的情况。
三是超文本5缺少统一实现标准。现有技术阻碍超文本5快速普及的最关键因素是实现标准过于分裂、缺少一致性。超文本5过于开放所带来的结果一是开发人员要痛苦的选型,二是不能确保实现的正确性和高效性。超文本5从标准到技术再到应用有一定距离,该过程需要改进和完善。
超文本5技术的兼容性直接决定了网页的呈现效果,直接影响用户体验,本发明对超文本5的几种新特性:视频/音频元素、服务器推送事件、高级表单以及客户端存储数据方式,分别编写实例代码,在各浏览器中运行,并结合HTML5Test、Caniuse和IE NetRenderer三种兼容性的检测工具得出结论。不同内核的浏览器下,超文本5网页的表现差距很大,超文本5技术在Chrome 49表现最好,其次是Opera 36和Firefox 45,越来越强大的内核使得谷歌、火狐浏览器在浏览网页时,解码能力和支持能力更强、效率更高及系统资源占有率更低。在Chrome 49浏览器下,超文本5的新特性大都能达到预期效果,能正常显示和使用。Opera 36和Firefox 45下,MPEG4格式的视频文件不兼容。但微软相比其它厂商浏览器仍处于较低水平,超文本5特性在微软系列浏览器下的表现不乐观,IE8除Web Storage支持外,其它四种特性均不支持,IE 9/10/11、Edge 13以及Safari 9浏览器对超文本5技术的支持也不理想。至于移动端,超文本5网页在不同内核的Chrome 49for Android和iOS Safari浏览器的表现也不如预期。需要对超文本5跨浏览器不兼容的问题提出具体的改造方案,实现包括跨浏览器网页兼容性自适应标准化,对已有代码不兼容的部分基于文档对象模型重建,并分别对主要新特性存在的兼容问题进行改造,解决基于超文本5的跨浏览器网页兼容标准问题。
针对现有技术的不足,本发明提供的基于超文本5的跨浏览器网页兼容标准构建方法,通过从九个方面制定跨浏览器网页兼容性自适应标准化,通过超文本5统一化标准保持超文本5代码风格一致,使其容易被理解、修改、维护与升级,超文本5网页在不同浏览器下的表现差异变小,实现在全部平台上同一应用正常使用,降低开发者的工作量,解决支持跨平台应用的超文本5的碎片化问题,便于开发人员添加功能及后期优化维护。通过跨浏览器网页兼容性自适应标准化,达到跨浏览器跨平台兼容,进行重建之后能很好地遵循文档对象标准,而且代码更健壮,易于维护和扩展,对解决大量存在的超文本5网页兼容性问题有较强实用性和推广价值。
为达到以上技术效果,本发明所采用的技术方案如下:
基于超文本5的跨浏览器网页兼容标准构建方法,包括跨浏览器网页兼容性自适应标准化和超文本5关键新特征兼容性标准化方法,跨浏览器网页兼容性自适应标准化包括超文本5统一化标准、基于文档对象模型标准的重建,超文本5关键新特征兼容性标准化方法包括Audio与Video元素、服务器发送事件、高级表单元素兼容标准化;
超文本5统一化标准包括九个方面:一是规范引进文件,二是统一命名规则,三是采用正确无误的文档类型,四是不省略、
和标签,五是正确设置head内容,六是关闭所有超文本元素,七是图片提供备选方案,八是恰当换行和缩进,九是属性值采用引号;超文本5编码标准保持超文本5代码风格统一,本发明超文本5统一化标准具体为:
一是规范引进文件,超文本、images、CSS、JS文件归档到协定目录中,省略外链资源URL协议,减少文件字节数,链接资源时采用相对路径,避免文件夹层级过多过深;
二是统一命名规则,超文本5采用统一的命名规则,文件名、属性名、元素名采用大写或者小写字母;
三是采用正确无误的文档类型,必须先明确声明超文本发明档类型,使Web浏览器通过判别文档决策解析器与渲染类型是否切换到对应的超文本5模式,避免浏览器进入混杂模式;DOCTYPE声明为<!DOCTYPE html>或<!doctype html>,不区分大小写;
四是不省略、
和标签,超文本标签表达页面语言:,超文本声明lang属性,明确指定页面中所用的自然语言,方便屏幕阅读器与搜索引擎,省略标签或者标签在文档对象与XML软件中会崩溃,省略标签在旧版浏览器下会发生致命错误,默认标签之前的内容被浏览器添加到一个默认的标签上,但是不省略head元素;五是正确设置head内容,超文本5中