基于超文本5的跨浏览器网页兼容标准构建方法

著录项
  • CN202010544474.8
  • 20200615
  • CN111695076A
  • 20200922
  • 荆门汇易佳信息科技有限公司
  • 刘秀萍;王程
  • G06F16/958
  • G06F16/958 G06F8/76 G06F8/38

  • 湖北省荆门市掇刀区龙井大道238号(荆门高新区创业中心)
  • 湖北(42)
摘要
本发明提供的基于超文本5的跨浏览器网页兼容标准构建方法,通过从九个方面制定跨浏览器网页兼容性自适应标准化,通过超文本5统一化标准保持超文本5代码风格一致,使其容易被理解、修改、维护与升级,超文本5网页在不同浏览器下的表现差异变小,实现在全部平台上同一应用正常使用,降低开发者的工作量,解决支持跨平台应用的超文本5的碎片化问题,便于开发人员添加功能及后期优化维护。通过跨浏览器网页兼容性自适应标准化,达到跨浏览器跨平台兼容,进行重建之后能很好地遵循文档对象标准,而且代码更健壮,易于维护和扩展,对解决大量存在的超文本5网页兼容性问题有较强实用性和推广价值。
权利要求

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中标签必备,用作添加标题名,表达页面主题,标题和语言帮助搜索引擎快速准确理解网页的主题内容,声明页面的编码规则为<metacharset="UTF-8">,若引用的JS脚本发明件和超文本发明档用的charset不同,需要指定外链文件编码,采用IE条件注释的方式,使该条JS脚本只在老版IE浏览器下加载,然后再用video或者audio分别添加一段视频或者音频:</p><p><videosrc="video.mp4"width="320"height="240"controlspreload></video></p><p></audio></p><p>html5media.js便能够在IE8,甚至更旧的IE6浏览器下采用Audio与Video标签。</p></div></div></div></div><div class='level-1 extend'><i class='iconfont ibtn'></i><i class='iconfont ibtn fn-hide'></i><div class='inner'><div class='part'><p>6.根据权利要求1所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,服务器发送事件兼容标准化采用腻子脚本技术,利用提供的JavaScript库来规避浏览器差异,只需加载第三方JS库到网页中,无需改动应用本身的客户端代码;</p><p>解决微软公司浏览器下XMLHttpRequest对象不兼容问题,需采用IE8中引进XDR对象,XDR对象对象提供onprogress事件,当事件触发时,响应内容通过responseText属性获得,采用XDR对象打开和服务器的连接后,当服务器出现新数据时,通过XDR对象里事件onprogress进行处理,采用XDR对象限制严格,这些限制影响XDR作为EventSource对象的实现,具体的限制和解决办法包括:</p><p>一是XDR对象发送的请求里不包括任何和用户认证有关的信息,包括cookie,若服务器端必须认证,通过HTTP请求的其它方式传递用户认证信息;</p><p>二是服务器端响应需包含头,声明该URL地址允许来自哪些域的访问,“*”表明可来自于任何域的访问,本发明采用和当下应用相同的域,限制只能够从当前域访问;</p><p>三是XDR对象发送请求不可以包括自定义的HTTP头,限制不能采用“Last-Event-ID”头声明最近一次客户端接收到的事件标识符,只允许采用HTTP请求的其他方法传递此标识符;</p><p>四是XDR对象请求的内容类型Content-Type只能是“text/plain”,表明POST请求方式,服务器端引进的框架不会自适应解析其内容,采用HttpServletRequest类的getParameter方法无法获取POST请求的内容,只能在服务器端解析原始请求的内容,获得其中参数的值。</p></div><div class='level-2'><div class='part'><p>7.根据权利要求6所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,XDR对象的一系列限制,服务器端也作对应修改,包括头的返回、请求中用户认证信息的处理、浏览器发出的“text/plain”类型参数的解析;</p><p>本发明采用的腻子脚本库是GitHub上开发的开源项目EventSource,将EventSource项目中eventsource.js文件作为腻子脚本,下载并放到网页所在的文件夹内,在head标签中引进该文件,编写相关代码;</p><p>页面运行结果还会随着时间继续向下延伸,采用腻子脚本库,对应更改服务器端的实现后,就能在IE8及以上以及Edge浏览器下采用超文本5的服务器推送事件。</p></div></div></div></div><div class='level-1 extend'><i class='iconfont ibtn'></i><i class='iconfont ibtn fn-hide'></i><div class='inner'><div class='part'><p>8.根据权利要求1所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,高级表单元素兼容标准化解决url、password、number、email几种输入存在的问题,实现跨浏览器的超文本5表单验证,本发明采用表单验证插件checkValidity.js,具体为:</p><p>一是支持中英文切换,checkValidity.js插件还支持双语网站切换中英文;</p><p>二是统一UI,该插件首先统一界面,模拟Chrome浏览器的效果,界面样式与位置显示统一,且能够自定义,对于提示信息,提供是否采用浏览器默认提示文字的选项,若不采用则自定义内容;</p><p>三是支持异步验证,支持异步验证是功能强大;</p><p>四是支持多种类型的规则验证,checkValidity.js插件可支持多种类型的验证规则,包括必填项、格式或者自定义。</p></div><div class='level-2'><div class='part'><p>9.根据权利要求8所述的基于超文本5的跨浏览器网页兼容标准构建方法,其特征在于,checkValidity.js插件的运用具体为:</p><p>第1步,编写form的html结构;</p><p>第2步,具有html结构之后,再初始化插件:</p><p>执行new From时传入三个参数,分别为表单的文档对象元素、验证规则中的配置、验证成功后的回调函数,其中checkOpt的errorMsgClass和errorInputClass二个属性用作自定义样式,上述初始化的操作,实现required和pattern属性及类型校验生效,属性pattern采用了正则表达式,其错误提示内容放在自定义的pm属性中。</p></div></div></div></div></div></div> </div> <div> <h5>说明书</h5> <div> <h6 data-role="jsly">技术领域</h6> <div> <p>本发明涉及一种跨浏览器网页兼容标准构建方法,特别涉及基于超文本5的跨浏览器网页兼容标准构建方法,属于网页兼容标准技术领域。</p> <p>超文本5时代的到来将Web技术推向了高峰,互联网深入到了每个现代人的生活中。网络化服务作为越来越受欢迎的服务方式,是日常生活和工作中不可或缺的部分。更多企业或者组织也认识到网络的强大功能,能够在Web上实现与全球各地的客户开展商务活动等。浏览器是人们获得网络服务的窗口,网页兼容性是采用者最先遇到、最容易碰到以及急切想要解决的问题。对于企业与相关组织而言,页面如果只能在特定浏览器中正常显示,肯定不能够满足不同用户的需求,导致的结果必然是减弱企业或者组织的自我竞争力,在开放的国际化路线上难以打开局面。当前,超文本5已成为各大互联网企业的重要标准。超文本5不仅能够表现网页内容,另有很好的跨平台性,可将Web技术带入极广阔的生态平台。超文本5是万维网联盟公开推出的互联网新版本Web标准,采用超文本5标准,页面变得更加丰富,能够实现更多的功能,开发人员只需编写同一页面,适配工作就能交给浏览器去完成。超文本5元素体系丰富,能替代复杂的插件,极大的降低Web技术开发成本。同时,超文本5具有开放性,不会被任何一家组织或者企业垄断,利于促进整个互联网行业的良性发展。借助超文本5的跨平台性,手机浏览器能通过流量入口变成平台。超文本5的设计目的,一是声明文档类型简单而优秀,二是代码语义化,三是能够本地存储与离线缓存,四是更简单地实现多媒体应用,五是网页自适应获取来自服务器的更新,六是更好地录入表单数据。</p><p>整体来看,全球主流互联网公司均已进军超文本5技术,通过不同的方式探索将超文本5为其所用,在推进、验证、兼容、纠错、再推进中不断迭代。然而,当前超文本5各技术在不同浏览器下的表现仍然很不一样。超文本5是新版本的超文本标记语言,超文本5基于超文本4进行了大量修改,新增和改良了一些元素、属性和行为,同时增加了一系列功能更强的技术,用作让Web站点及应用更加多样化。超文本发明至今,逐渐成为一种行业标准。</p><p>虽然超文本5标准的许多特征极具革命的性质,但并不意味着采用超文本4创建的网站必须重新创建,超文本5在于进化而并非革命,它的核心理念是保持所有新特征的平滑过渡,向后兼容。超文本5建立了一些规则,例如新特征应该以CSS、HTML、文档对象和JavaScript为基础,减少依赖外部插件,更高效处理错误的方式,更丰富表达脚本的元素,超文本5应不限于设备或者平台,开发进程应公开透明等。</p><p>但超文本5技术越来越受到青睐,其跨浏览器碎片化的问题越受到明显,使开发和使用人员受到严重困扰。碎片化是操作系统或者浏览器有许多版本,彼此间有差异,致使网页在不同平台或者浏览器下无法正常应用。当前超文本5网页在不同浏览器下的表现差异非常大,浏览器行业还缺少必要的统一扩展标准。由于超文本5最大的优势是能够实现在全部平台上同一应用正常使用,降低开发者的工作量,碎片化问题对支持跨平台应用的超文本5是非常大的障碍。</p><p>经过多年的发展,超文本5实现了越来越多的功能。但对于超文本5网页的表现形式,现有技术浏览器和操作系统等相关开发商并不统一。若要达到W3C规划的理想状态,使超文本5成为互联网行业遵循的标准,使不同用户体都能体验到超文本5标准,解决超文本5页面跨浏览器的兼容性便极为重要。解决超文本5跨浏览器碎片化问题,超文本5前景非常广阔。然而,虽然在应用开发与平台上超文本5有很大的优势,但对于移动平台上用户而言,超文本5的价值仍有待验证,用户体验方面还不非常成熟,超文本5进一步的发展还需要芯片、各种浏览器、操作系统以及Web应用开发商等一同努力。</p><p>现有技术超文本5标准的全部功能并不能在所有浏览器下实现,实现超文本5完全被支持还需要很长时间。当前重要的是哪些标准和技术能真正采用在用户浏览器上。若超文本5被当前所有主流浏览器完全支持,并且所有用户都采用升级后的浏览器,插件又将会受到来自超文本5技术的沉重打击。</p><p>尽管超文本5技术不断更新和完善,应用也有了一定规模,但具体的实现过程中也还存在一些较大且实际的阻碍。除上述问题外,针对现有技术存在的部分缺点,本发明拟解决以下问题:</p><p>一是兼容性,超文本5的新特征很多,但很多设备、不同浏览器对所有新特征不都能很好的支持,一些常见的浏览器不支持超文本5的部分新特征,导致用户在不同浏览器下的体验不一致,部分浏览器下的体验很不好,严重制约了超文本5的发展。解决该问题会极大的增加开发人员的工作量,需要反复测试。</p><p>二是性能和安全性,超文本5的性能与原始APP还有明显差距。移动平台上,超文本5的性能与速度也需提高。超文本5是开放环境里显示内容的网页标准,安全性上会带来网页内容不好保护的问题,尤其对开发超文本5游戏的公司,经常会碰到游戏上线没几天就被复制的情况。</p><p>三是超文本5缺少统一实现标准。现有技术阻碍超文本5快速普及的最关键因素是实现标准过于分裂、缺少一致性。超文本5过于开放所带来的结果一是开发人员要痛苦的选型,二是不能确保实现的正确性和高效性。超文本5从标准到技术再到应用有一定距离,该过程需要改进和完善。</p><p>超文本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的跨浏览器网页兼容标准问题。</p> <p>针对现有技术的不足,本发明提供的基于超文本5的跨浏览器网页兼容标准构建方法,通过从九个方面制定跨浏览器网页兼容性自适应标准化,通过超文本5统一化标准保持超文本5代码风格一致,使其容易被理解、修改、维护与升级,超文本5网页在不同浏览器下的表现差异变小,实现在全部平台上同一应用正常使用,降低开发者的工作量,解决支持跨平台应用的超文本5的碎片化问题,便于开发人员添加功能及后期优化维护。通过跨浏览器网页兼容性自适应标准化,达到跨浏览器跨平台兼容,进行重建之后能很好地遵循文档对象标准,而且代码更健壮,易于维护和扩展,对解决大量存在的超文本5网页兼容性问题有较强实用性和推广价值。</p><p>为达到以上技术效果,本发明所采用的技术方案如下:</p><p>基于超文本5的跨浏览器网页兼容标准构建方法,包括跨浏览器网页兼容性自适应标准化和超文本5关键新特征兼容性标准化方法,跨浏览器网页兼容性自适应标准化包括超文本5统一化标准、基于文档对象模型标准的重建,超文本5关键新特征兼容性标准化方法包括Audio与Video元素、服务器发送事件、高级表单元素兼容标准化;</p><p>超文本5统一化标准包括九个方面:一是规范引进文件,二是统一命名规则,三是采用正确无误的文档类型,四是不省略<html>、<head>和<body>标签,五是正确设置head内容,六是关闭所有超文本元素,七是图片提供备选方案,八是恰当换行和缩进,九是属性值采用引号;</p><p>超文本5编码标准保持超文本5代码风格统一,本发明超文本5统一化标准具体为:</p><p>一是规范引进文件,超文本、images、CSS、JS文件归档到协定目录中,省略外链资源URL协议,减少文件字节数,链接资源时采用相对路径,避免文件夹层级过多过深;</p><p>二是统一命名规则,超文本5采用统一的命名规则,文件名、属性名、元素名采用大写或者小写字母;</p><p>三是采用正确无误的文档类型,必须先明确声明超文本发明档类型,使Web浏览器通过判别文档决策解析器与渲染类型是否切换到对应的超文本5模式,避免浏览器进入混杂模式;DOCTYPE声明为<!DOCTYPE html>或<!doctype html>,不区分大小写;</p><p>四是不省略<html>、<head>和<body>标签,超文本标签表达页面语言:<html lang="zh">,超文本声明lang属性,明确指定页面中所用的自然语言,方便屏幕阅读器与搜索引擎,省略<html>标签或者<body>标签在文档对象与XML软件中会崩溃,省略<body>标签在旧版浏览器下会发生致命错误,默认<body>标签之前的内容被浏览器添加到一个默认的<head>标签上,但是不省略head元素;</p><p>五是正确设置head内容,超文本5中<title>标签必备,用作添加标题名,表达页面主题,标题和语言帮助搜索引擎快速准确理解网页的主题内容,声明页面的编码规则为<meta charset="UTF-8">,若引用的JS脚本发明件和超文本发明档用的charset不同,需要指定外链文件编码<script charset="UTF-8"src="">,为页面声明IE兼容模式为edge,采用简易语法载入外部的CSS样式和JS脚本发明件,省略脚本和样式表的type属性;</p><p>六是关闭所有超文本元素,本发明每个元素都要添加关闭标签;</p><p>七是图片提供备选方案,引进图片时采用alt属性,当图片不能显示时,alt属性值替代图片显示,并且协助页面搜索引擎优化,设定好图片尺寸,在加载时预留指定空间,减少闪烁;</p><p>八是恰当换行和缩进,每行代码量应少于80个字符,在较短代码间减少不必要的空行,纯文本在超文本标签结束之前不要换行,每个逻辑功能块之间添加空行,嵌套内容采用两个或者四个空格缩进一级,不直接用TAB键,恰当添加超文本注释,尤其是TODO注释;</p><p>九是属性值采用引号,超文本元素属性按照class、id或者name、data-*、src或者href或者type或者for、title或者alt、role或者aria-*的顺序声明,data-*为元素自定义的属性,超文本5属性值采用双引号,超文本元素的id、class属性值取有含义的名称,disabled/selected/checked属性无需设置值。</p><p>基于超文本5的跨浏览器网页兼容标准构建方法,进一步的,基于文档对象模型标准的重建改造不兼容的代码,无需人工改动已有的代码,文档对象结构允许动态访问和更新文档内容、结构及样式,对不符合文档对象标准的已存在的代码,通过重建的方式将其自适应标准化,实现跨浏览器兼容;</p><p>各种浏览器通过脚本语言控制文档对象,代码若不兼容,首先解析脚本,若要在解析之后的脚本语言里到不兼容的代码,需要获取不兼容列表,在遵循文档对象标准的代码生成时,采用自适应标准化重建工具;</p><p>具体实现过程中需解析嵌入在页面中的JavaScript代码,到并改正不兼容部分,对具体的JS脚本,构造的语言解析器,采用开源语法分析器实现;开源语法分析器接受语法表达,根据已给的词法规则形成对应分析器,代码以语言C++、Java或C <p>图1是本发明跨浏览器网页兼容性自适应标准化的超文本5统一化标准示意图。</p><p>图2是本发明自适应标准化重建工具的工作流程示意图。</p> <p>下面结合附图,对本发明提供的基于超文本5的跨浏览器网页兼容标准构建方法的技术方案进行进一步的描述,使本领域的技术人员可以更好的理解本发明并能予以实施。</p><p>基于超文本5的跨浏览器网页兼容标准构建方法,包括跨浏览器网页兼容性自适应标准化和超文本5关键新特征兼容性标准化方法,跨浏览器网页兼容性自适应标准化包括超文本5统一化标准、基于文档对象模型标准的重建,超文本5关键新特征兼容性标准化方法包括Audio与Video元素、服务器发送事件、高级表单元素兼容标准化;</p><p>超文本5统一化标准包括九个方面:一是规范引进文件,二是统一命名规则,三是采用正确无误的文档类型,四是不省略<html>、<head>和<body>标签,五是正确设置head内容,六是关闭所有超文本元素,七是图片提供备选方案,八是恰当换行和缩进,九是属性值采用引号。</p><p>一、跨浏览器网页兼容性自适应标准化</p><p>(一)超文本5统一化标准</p><p>超文本5编码标准保持超文本5代码风格统一,使其容易被理解、剖析、维护与升级,便于开发人员添加功能和后期优化维护,高质量的超文本发明档使网站拥有更优秀的前端架构,为网站的发展打下良好基础。本发明超文本5统一化标准包括九个方面,如图1所示:</p><p>一是规范引进文件,超文本、images、CSS、JS文件归档到协定目录中,省略外链资源URL协议,减少文件字节数,例如实施例省略http:或者https:,简写为,其中“//”不能省略,链接资源时采用相对路径,避免文件夹层级过多过深,提高文件查效率。</p><p>二是统一命名规则,超文本5采用统一的命名规则,文件名、属性名、元素名采用大写或者小写字母,相比大写字母,小写字母更易编写,且风格更加清爽,因此实施例采用小写,对应X超文本发明档编写。</p><p>三是采用正确无误的文档类型,必须先明确声明超文本发明档类型,使Web浏览器通过判别文档决策解析器与渲染类型是否切换到对应的超文本5模式,避免浏览器进入混杂模式;DOCTYPE声明为<!DOCTYPE html>或<!doctype html>,不区分大小写。</p><p>四是不省略<html>、<head>和<body>标签,在超文本5标准中,<html>、<head>与<body>标签是可以省略的,但本发明超文本5统一化标准不省略<html>、<head>和<body>标签,超文本标签表达页面语言:<html lang="zh">,超文本声明lang属性,明确指定页面中所用的自然语言,方便屏幕阅读器与搜索引擎,省略<html>标签或者<body>标签在文档对象与XML软件中会崩溃,省略<body>标签在旧版浏览器(例如IE 9)下会发生致命错误,默认<body>标签之前的内容被浏览器添加到一个默认的<head>标签上,但是不省略head元素。</p><p>五是正确设置head内容,超文本5中<title>标签必备,用作添加标题名,表达页面主题,标题和语言帮助搜索引擎快速准确理解网页的主题内容,声明页面的编码规则为<meta charset="UTF-8">,若引用的JS脚本发明件和超文本发明档用的charset不同,需要指定外链文件编码<script charset="UTF-8"src="">,为页面声明IE兼容模式为edge,采用简易语法载入外部的CSS样式和JS脚本发明件,省略脚本和样式表的type属性。</p><p>六是关闭所有超文本元素,在超文本5中,不一定要关闭所有元素,例如<p>标签,但本发明每个元素都要添加关闭标签,在超文本5中,空的超文本元素也不一定要关闭,采用<metacharset="utf-8">或者<metacharset="utf-8"/>两种方式,本发明采用第二种,斜线“/”在X超文本与XML中必备,若编写的页面能在XML软件中采用,采用加斜线的风格。</p><p>七是图片提供备选方案,引进图片时采用alt属性,当图片不能显示时,alt属性值替代图片显示,并且协助页面搜索引擎优化,设定好图片尺寸,在加载时预留指定空间,可减少闪烁。</p><p>八是恰当换行和缩进,每行代码量应少于80个字符,否则采用超文本5编辑器,需左右滚动代码很不方便,在较短代码间减少不必要的空行,纯文本在超文本标签结束之前不要换行,每个逻辑功能块之间添加空行,使代码结构更容易读和维护,嵌套内容采用两个或者四个空格缩进一级,不直接用TAB键,恰当添加超文本注释,尤其是TODO注释,更易于阅读。</p><p>九是属性值采用引号,超文本元素属性按照class、id或者name、data-*、src或者href或者type或者for、title或者alt、role或者aria-*的顺序声明,确保代码的易读性,data-*为元素自定义的属性,超文本5属性值采用双引号,属性值采用引号引进更易读,如果属性值含有空格,则需采用引号,采用属性值加引号的统一风格,超文本元素的id、class属性值取有含义的名称,disabled/selected/checked属性无需设置值。</p><p>(二)基于文档对象模型标准的重建</p><p>现有技术有两个解决文档对象兼容的方案,方案一是根据文档对象中的应用程序接口编程,方案一对于习惯于某个浏览器的开发者来说,许多标准的应用程序接口不熟悉且不再愿意学习。方案二是采用能力检测,在执行代码之前,检测某个脚本对象或者方法是否存在,若有必需的对象或方法,说明浏览器能够采用它,且代码可以按预期执行。对现有技术的代码而言,上述二类方案的共同缺点是,重新编码的工作量太大,编码成本过高,不能实现自动化。</p><p>本发明基于文档对象模型标准的重建能够改造不兼容的代码,无需人工改动已有的代码,同时也减少了人工改动的错误率。文档对象结构允许动态访问和更新文档内容、结构及样式。各浏览器厂家为了提升竞争力等因素,并没有完全遵循W3C标准去实现文档对象模型标准,对不符合文档对象标准的已存在的代码,通过重建的方式将其自适应标准化,实现跨浏览器兼容。</p><p>各种浏览器通过脚本语言控制文档对象,代码若不兼容,首先解析脚本,若要在解析之后的脚本语言里到不兼容的代码,需要获取不兼容列表,在遵循文档对象标准的代码生成时,采用自适应标准化重建工具。自适应标准化重建工具的工作流程如图2所示。</p><p>具体实现过程中需解析嵌入在页面中的JavaScript代码,到并改正不兼容部分,对具体的JS脚本,构造的语言解析器,采用开源语法分析器实现。开源语法分析器接受语法表达,根据已给的词法规则形成对应分析器,代码以语言C++、Java或C </div> <!--分页导航--> <div class="th_page th_page_color4 th_top"> </div> <div class="umCopyright"> <p>本文发布于:2024-09-24 06:27:17,感谢您对本站的认可!</p> <p>本文链接:<a href="https://www.17tex.com/tex/4/73100.html" target="_blank" style="color:#999">https://www.17tex.com/tex/4/73100.html</a></p> <p>版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。</p> </div> <!--上一篇下一篇--> <div class="detail-arr"> <div class="detail-arr-left">上一篇:<a href='https://www.17tex.com/tex/4/73099.html'>逻辑卷设定硬盘禁区并利用硬盘禁区备份配置信息的方法</a></div> <div class="detail-arr-right">下一篇:<a href='https://www.17tex.com/tex/4/73101.html'>一种船舶用水源热泵温湿分控中央空调</a></div> </div> <!--内容页tags--> <div class="detail-tags"> <i class="iconfont icon-x-tags"></i> 标签:<a href="https://www.17tex.com/tags/%E5%9F%BA%E4%BA%8E%E8%B6%85%E6%96%87%E6%9C%AC5%E7%9A%84%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BD%91%E9%A1%B5%E5%85%BC%E5%AE%B9%E6%A0%87%E5%87%86%E6%9E%84%E5%BB%BA%E6%96%B9%E6%B3%95_0.html" target="_blank">基于超文本5的跨浏览器网页兼容标准构建方法</a></div> </section> <!--评论--> <a name="comments" id="comments"></a> <div class="showpage" id="plpost"> <link href="https://www.17tex.com/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论(共有 <span id="infocommentnumarea">0</span> 条评论)</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗?"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.17tex.com/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.17tex.com/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定,不要发布广告和违法内容!"></textarea> <script src="https://www.17tex.com/d/js/js/plface.js"></script>    <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码:<input name="key" type="text" class="inputText" size="16" /> <img src="https://www.17tex.com/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='https://www.17tex.com/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="73100" /> <input name="classid" type="hidden" id="classid" value="4" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.17tex.com/tex/4/73100.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <!-- <script src="https://www.17tex.com/e/extend/infocomment/commentajax.php?classid=4&id=73100"></script> !--> </div> </div> </div> <!--侧边栏--> <div class="col-md-3 col-xs-12"> <!--推荐文章--> <div class="thleftcon wap_top th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">推荐文章</span></div> <ul class="th-5" style="padding-top:0px"> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/1.html" title="一种基于物联网平台的智慧养殖管控系统的制作方法怎么样?" target="_blank">一种基于物联网平台的智慧养殖管控系统的制作方法怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/2.html" title="一种百合专用栽培介质及百合栽培方法与流程怎么样?" target="_blank">一种百合专用栽培介质及百合栽培方法与流程怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/3.html" title="一种光伏治沙装置怎么样?" target="_blank">一种光伏治沙装置怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/4.html" title="一种重金属土壤改善用植物套种种植系统及设备怎么样?" target="_blank">一种重金属土壤改善用植物套种种植系统及设备怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/5.html" title="一种马铃薯水稻轮作高效种植方法与流程怎么样?" target="_blank">一种马铃薯水稻轮作高效种植方法与流程怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/6.html" title="软组织的染色方法及人造肉模型生成方法怎么样?" target="_blank">软组织的染色方法及人造肉模型生成方法怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/7.html" title="一种茯无青无花果干果粉、浓饮的组合物及其制备方法与流程怎么样?" target="_blank">一种茯无青无花果干果粉、浓饮的组合物及其制备方法与流程怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/8.html" title="一种挞皮成型方法及其成型生产线与流程怎么样?" target="_blank">一种挞皮成型方法及其成型生产线与流程怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/9.html" title="电子雾化设备的控制方法、装置、电子雾化设备和介质与流程怎么样?" target="_blank">电子雾化设备的控制方法、装置、电子雾化设备和介质与流程怎么样?</a></li> <li> <span class="date">11-24</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/10.html" title="一种支撑段加香的气溶胶产生制品的制作方法怎么样?" target="_blank">一种支撑段加香的气溶胶产生制品的制作方法怎么样?</a></li> </ul> </div> <!--按点击量排序--> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">排行榜</span></div> <ul class="th-5"> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486383.html" title="商标注册一站式代理合同标准范本" target="_blank">商标注册一站式代理合同标准范本</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486382.html" title="商标业务流程范文" target="_blank">商标业务流程范文</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486381.html" title="国际奢侈品品牌网址大全" target="_blank">国际奢侈品品牌网址大全</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486380.html" title="《女儿愿》中的跨文化经验" target="_blank">《女儿愿》中的跨文化经验</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486379.html" title="造福桑梓 功垂青史" target="_blank">造福桑梓 功垂青史</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486378.html" title="同心同德同舟楫,济人济事济天下" target="_blank">同心同德同舟楫,济人济事济天下</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486377.html" title="北京市师范大学附属中学2017-2018学年高一语文下学期期末考试试题(扫描..." target="_blank">北京市师范大学附属中学2017-2018学年高一语文下学期期末考试试题(扫描...</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486376.html" title="黑龙江省哈尔滨市哈尔滨师范大学附属中学2018-2019学年高一下学期第一..." target="_blank">黑龙江省哈尔滨市哈尔滨师范大学附属中学2018-2019学年高一下学期第一...</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486375.html" title="2020年湖北省武汉市华中师大一附中自主招生数学试卷-普通用卷" target="_blank">2020年湖北省武汉市华中师大一附中自主招生数学试卷-普通用卷</a></li> <li><span class="date">0℃</span><i class="iconfont icon-jiantou_yemian_xiangyou th_cl4"></i><a class="th_hover_a4" href="https://www.17tex.com/tex/4/486374.html" title="吉林省通化市辉南县辉南六中、公主岭一中、苏兰一中等八校高一物理下..." target="_blank">吉林省通化市辉南县辉南六中、公主岭一中、苏兰一中等八校高一物理下...</a></li> </ul> </div> <!--标签云--> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">热门标签</span></div> <ul class="th-7 th_tag4"> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%89%80%E8%BF%B0">所述</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%BF%9B%E8%A1%8C">进行</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%B3%BB%E7%BB%9F">系统</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%B8%93%E5%88%A9">专利</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%8A%80%E6%9C%AF">技术</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BC%81%E4%B8%9A">企业</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%8F%91%E5%B1%95">发展</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%B7%A5%E4%BD%9C">工作</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BD%BF%E7%94%A8">使用</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%AE%BE%E5%A4%87">设备</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%AE%BE%E8%AE%A1">设计</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%95%B0%E6%8D%AE">数据</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%96%B9%E6%B3%95">方法</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%AE%A1%E7%90%86">管理</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BA%A7%E5%93%81">产品</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%9D%90%E6%96%99">材料</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%B8%AD%E5%9B%BD">中国</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%AD%A6%E7%94%9F">学生</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%A3%85%E7%BD%AE">装置</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%94%9F%E4%BA%A7">生产</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%85%AC%E5%8F%B8">公司</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BF%A1%E6%81%AF">信息</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%96%BD%E5%B7%A5">施工</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%9F%A5%E8%AF%86%E4%BA%A7%E6%9D%83">知识产权</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%AE%89%E8%A3%85">安装</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E9%9C%80%E8%A6%81">需要</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%A0%94%E7%A9%B6">研究</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%A6%81%E6%B1%82">要求</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BF%9D%E6%8A%A4">保护</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%8E%A7%E5%88%B6">控制</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E7%BB%93%E6%9E%84">结构</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E9%87%87%E7%94%A8">采用</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%9C%8D%E5%8A%A1">服务</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E4%BF%A1%E5%8F%B7">信号</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%A3%80%E6%B5%8B">检测</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%AD%A6%E4%B9%A0">学习</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E5%A4%84%E7%90%86">处理</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%B8%A9%E5%BA%A6">温度</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E8%A1%A8%E9%9D%A2">表面</a></li> <li><a href="https://www.17tex.com/e/tags/?tagname=%E6%A0%87%E5%87%86">标准</a></li> </ul> </div> </div> </div> </div> <!--页面底部--> <div class="footer2"> Copyright ©2019-2024 Comsenz Inc.Powered by © <a href="https://www.17tex.com/">易纺专利技术学习网</a> <a rel="external nofollow" href="https://beian.miit.gov.cn/">豫ICP备2022007602号</a> <img style="display: inline;margin: 0 5px;width: 16px;" class="logos" src="/static/1.png" data-v-561690e4=""> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=41160202000601" rel="noreferrer" target="_blank">豫公网安备41160202000603</a> 站长QQ:729038198 <a target="_blank" href="https://www.17tex.com/gywm/">关于我们</a> <a target="_blank" href="https://www.17tex.com/gywm/lxwm/">投诉建议</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?494f92137d0627f733b6cc38ee8622da"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--右侧悬浮客服--> <div class="thgotop"> <ul> <li id="guan" class="ditop th_bg4"> <div class="yewan"> <i class="iconfont icon-guandeng"></i> <span class="">我要关灯</span> </div> <div class="baitian"> <i class="iconfont icon-zu"></i> <span class="">我要开灯</span> </div> </li> <li id="go_top" class="ditop th_bg4"> <i class="iconfont icon-zhiding"></i> <span>返回顶部</span> </li> </ul> </div> <script type="text/javascript" > var swiper = new Swiper('.thbanner', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: true,//用户操作swiper之后,是否禁止autoplay }, pagination: {//分页器 el: '.swiper-pagination', clickable: true,//点击分页器的指示点分页器会控制Swiper切换 }, }); var swiper = new Swiper('.thslide2', { slidesPerView: 4, spaceBetween: 10, loop: true, autoplay: { delay: 1500, stopOnLastSlide: false,//如果设置为true,当切换到最后一个slide时停止自动切换 disableOnInteraction: false,//用户操作swiper之后,是否禁止autoplay } }); </script> <script type="text/javascript" src="https://www.17tex.com/skin/17tex/js/main.js"></script> <!--百度自动推送--> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>