CN104375858B - 多浏览器平台执行javascript脚本的方法及装置 - Google Patents

Abstract

一种多浏览器平台执行javascript脚本的方法，包括：加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码；接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用；获取浏览器版本信息；根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。此外，还提供了一种多浏览器平台执行javascript脚本的装置。上述多浏览器平台执行javascript脚本的方法及装置能够降低维护或移植的开销。

Description

多浏览器平台执行javascript脚本的方法及装置

技术领域

本发明涉及互联网技术领域，特别是涉及一种多浏览器平台执行javascript脚本的方法及装置。

背景技术

现在的浏览器市场上充斥着大量的浏览器产品，包括IE、Chrome、Firefox、Opera、360浏览器、搜狗浏览器、猎豹浏览器、百度浏览器、qq浏览器等。如此多的浏览器，带给使用者的是不同的用户体验，而带给开发者的，却是极大的开发难度。现有的浏览器产品的内核通常为以下三种浏览器内核中的一种：IE内核、chrome内核和firefox内核，而基于不同的浏览器内核的浏览器产品对javascript脚本的解析方式往往存在一些差异，从而使得某些javascript语句在特定的浏览器上无法正常执行。

为了使网页上的javascript脚本能够在多种浏览器上均能正常运行，开发人员在进行web程序开发时，通常需要在javascript语句调用存在差异的位置加入浏览器类型判断的代码，因此编写的代码量较多。针对上述问题，在新开发web系统时，虽然可通过封装函数的方式对该代码进行封装，但对于移植的web系统或者在对现有的web系统进行维护时，若对现有代码中的javascript语句进行封装函数的替换，则需要替换的代码量较大，而且批量替换容易出错，从而造成了代码维护或移植的开销较大。

发明内容

基于此，有必要提供一种能够降低维护或移植的开销的多浏览器平台执行javascript脚本的方法。

一种多浏览器平台执行javascript脚本的方法，包括：

加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码；

接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用；

获取浏览器版本信息；

根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。

在其中一个实施例中，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为属性调用时，调用所述代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

在其中一个实施例中，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制添加的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在其中一个实施例中，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制替换的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在其中一个实施例中，所述加载预设的代码替换脚本的步骤为：

获取网页中定义的代码替换脚本的链接，通过网络抓取与所述链接对应的代码替换脚本进行加载。

此外，还有必要提供一种能够降低维护或移植的开销的多浏览器平台执行javascript脚本的装置。

一种多浏览器平台执行javascript脚本的装置，包括：

转换脚本加载模块，用于加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码；

执行语句获取模块，用于接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用；

浏览器版本获取模块，用于获取浏览器版本信息；

代码替换执行模块，用于根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。

在其中一个实施例中，所述代码转换执行模块还用于在所述执行语句为属性调用时，调用所述代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

在其中一个实施例中，所述代码转换执行模块还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制添加的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在其中一个实施例中，所述代码转换执行模块还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制替换的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在其中一个实施例中，所述转换脚本加载模块还用于获取网页中定义的代码替换脚本的链接，通过网络抓取与所述链接对应的代码替换脚本进行加载。

上述多浏览器平台执行javascript脚本的方法和装置中，程序开发人员或维护人员只需要根据不同浏览器之间的差异，预先在代码替换脚本中定义存在兼容性问题的属性调用和函数调用的实现代码，然后在网页的起始位置加载该代码替换脚本，即可使得各种浏览器在解析现有的已完成的javascript代码以及后续开发将要生成的javascript代码时，能够通过转而执行代码替换脚本中定义的替换的实现代码而避免兼容性问题造成的浏览器运行不正常的情况。也就是说，程序开发人员和程序维护人员只需要定义一份代码替换脚本，而不需要对整个web程序中的所有javascript代码进行替换和修改，因此维护或移植的开销较小，而且出错的几率较小。

附图说明

图1为一个实施例中多浏览器平台执行javascript脚本的方法的流程图；

图2为一个实施例中IE浏览器下的innerText属性效果图；

图3为一个实施例中IE浏览器下的moveRow函数效果图；

图4为一个实施例中IE浏览器下的insertRow函数的效果图；

图5为一个实施例中chrome浏览器下的insertRow函数的效果图；

图6为一个实施例中多浏览器平台执行javascript脚本的装置的结构示意图。

具体实施方式

Javascript，是一种基于对象的动态类型的区分大小写的客户端脚本语言。Netscape在最初将其脚本语言命名为LiveScript，JavaScript的主要设计原则源自Self和Scheme。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

由此可见，JavaScript在各个浏览器产品上存在兼容性问题，即因为不同的浏览器对同一段JavaScript代码有不同的解析，造成页面显示时表现不一致,这种不一致主要表现为显示差异和语法差异，前者的表现通常就是元素的位置、大小、颜色等的视觉差异，而后者的表现通常就是打开页面失败、页面加载不完整、浏览器提示脚本错误、部分按钮点击失败、按键不响应等等功能性问题。后者由于会造成页面失效，影响较大，因此本专利解决的是这一类的问题。

如前所述，现有的解决javascript脚本在多浏览器上兼容性问题的方法使得代码维护的开销太大，因此，为解决上述问题，特提出了一种多浏览器平台执行javascript脚本的方法。该方法完全依赖于计算机程序，该计算机程序可运行于基于冯洛伊曼体系的计算机系统上。该计算机程序可以是一段定义在网页中的javascript脚本(通常在页面的最前面)，也可以是网页中链接的一个javascript脚本文件(该链接通常也在页面的最前面)。

在一个实施例中，如图1所示，该方法包括：

步骤S102，加载预设的代码替换脚本，该代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码。

步骤S104，接收javascript执行指令，获取相应的执行语句，执行语句包括属性调用和/或函数调用。

步骤S106，获取浏览器版本信息。

步骤S108，根据浏览器版本信息调用代码替换脚本中定义的与属性调用和/或函数调用对应的实现代码执行。

Javascript是一种基于对象的程序语言，javaScript里所有的东西都是对象。对象是属性的集合。数字、字符串、布尔值等原始值是"伪对象"，它们同样拥有属性，但是在栈上分配并按值传递。而其他的对象是堆上分配并按引用传递。同时，在javascript中，函数也是对象，能够作为变量的值、返回值、参数或者属性的值。函数对象特殊的地方是能通过“xxx()”语法执行包含在xxx函数对象内的代码。

Javascript的原型机制即prototype机制。prototype是构造函数的一个属性,该属性指向一个对象。而这个对象将作为该构造函数所创建的所有实例的基引用(basereference),可以把对象的基引用想像成一个自动创建的隐藏属性。当访问对象的一个属性时，首先查找对象本身，找到则返回；若不，则查找基引用指向的对象的属性(如果还找不到实际上还会沿着原型链向上查找，直至到根)。只要没有被覆盖的话,对象原型的属性就能在所有的实例中找到。

javascript执行指令的执行语句即在web系统运行中在执行javascript脚本时具体执行的javascript代码语句(由于javascript语言为解释性语言，因此源代码可直接解释执行)。javascript执行语句包括属性调用和函数调用，属性调用还包括获取属性和给属性赋值两种情况

例如，若执行的javascript代码语句为：

var obj1＝document.getElementById("d")；

obj1.innerText＝"show text"

则表示先获取id属性为d的javascript对象(函数调用)，然后将该对象的innerText属性赋值为字符串show text(属性赋值)。

若执行的javascript代码语句为：

obj2.innerText＝obj1.innerText；

则表示先读取javascript对象obj1的innerText属性(属性获取)，然后将其赋值给对象obj2的innerText属性(属性赋值)。

浏览器版本信息即为浏览器的内核类型，可获取javascript中的navigator对象的appVersion进行判断，通常分为IE内核类型、chrome内核类型和firefox内核类型。

在本实施例中，在执行语句为属性调用时，根据浏览器版本信息调用代码替换脚本中定义的与属性调用和/或函数调用对应的实现代码执行的步骤包括：

调用代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

例如，前述的javascript对象的innerText属性为IE内核独有，同样的还包括全局的事件对象event、event对象的srcElemt属性等。

如图2所示，图2的表单中对应的代码中，使用objCell.innnerText来读取用户名，根据不同的用户名去执行不同的操作，这个流程在IE下是可以正常执行的，但是Firefox和Chrome下却不支持这个操作，Firefox和Chrome下有自己独有的读取方法，上面的页面如果在Chrome或者Firefox下打开，当执行到读用户名的javascript执行语句：objTable.innnerText时，页面会没有反应(如果这句话在页面打开时就执行，那么页面会打开不完全)，使用浏览器的F12工具在控制台下会看到提示这一句脚本错误。

而在本实施例中，可预先在代码替换脚本中使用__defineGetter__(原型get函数)或__defineSetter__(原型set函数)对非IE内核的浏览器版本中的innnerText属性的属性获取函数和属性赋值函数进行定义，从而为该浏览器版本生成了解析innnerText属性的实现代码。

例如，可在代码替换脚本中使用如下定义：

也就是说，在chrome内核和firefox内核中的TextContent属性和IE内核中的innnerText属性功能和作用相同，在chrome内核和firefox内核环境下在解析javascript执行语句innnerText属性时，自动将其转换成TextContent属性进行解析。

例如，若在chrome环境中执行的javascript执行语句为：

obj1.innerText＝"show text"

则根据代码替换脚本中的定义，执行前述定义的innerText的属性赋值函数，根据其定义相当于执行了：

obj1.TextContent＝"show text"

若在chrome环境中执行的javascript执行语句为：

obj1.innerText

则根据代码替换脚本中的定义，执行前述定义的innerText的属性读取函数，根据其定义相当于执行了：

obj1.TextContent

在本实施例中，对于函数调用则存在两种情况，一种是某些浏览器不存在某个函数，另一种是某个函数在多个浏览器中定义不一致存在偏差。

对于某些浏览器不存在某个函数的情况，在本实施例中，根据浏览器版本信息调用代码替换脚本中定义的与属性调用和/或函数调用对应的实现代码执行的步骤可包括：在执行语句为函数调用时，调用代码替换脚本中通过原型机制添加的与函数对应的与浏览器版本信息适配的实现代码。

例如，IE浏览器支持的fireEvent方法、moveRow方法在其他浏览器不支持，如图3所示，图3展示了一个各行直接可以上移下移的表格，当用户在页面点击上移或者下移时，会执行类似这样的javascript语句：objRow.moveRow(iS,iT)。如果在非IE浏览器下，鼠标点击上移/下移，该语句并不会得到正确地解析，因此页面上会看不到有移动的步骤，并且用F12打开控制台会看到有脚本错误。

为了使这个页面在非IE浏览器下也能正常，可以预先在代码替换脚本中通过原型机制添加与moveRow对应的函数实现代码。在执行到相应的函数调用的javascript语句时，则可执行该添加的实现代码，实现表格行上下移动的功能。

例如，可在代码替换脚本中进行如下定义：

也就是说，当在HTMLTableElement对象没有moveRow函数的chrome或firefox浏览器中解析到该对象的moveRow函数时，则自动执行代码替换脚本中定义的关于该函数的实现代码。

而在本实施例中，对于某个函数在多个浏览器中定义不一致存在偏差的情况，根据浏览器版本信息调用代码替换脚本中定义的与属性调用和/或函数调用对应的实现代码执行的步骤可包括：

在执行语句为函数调用时，调用代码替换脚本中通过原型机制替换的与函数对应的与浏览器版本信息适配的实现代码。

例如，在IE、chrome和Firefox浏览器中的表格对象均定义有insertRow函数，可以用来给表格中添加一个空行，这个函数有一个参数param，用来指示插入到哪一行，这个参数如果在调用时不写，那么IE和Firefox下默认是插入到最后一行，而在chrome下会插入到第一行。

如图4所示，其展示了在IE中调用objTable.insertRow(不含参数)对同一个表格进行插入一行的操作后的截图。

如图5所示，其展示了在chrome中调用objTable.insertRow(不含参数)对同一个表格进行插入一行的操作后的截图。

由图4和图5的对比可看出，insertRow函数在chrome下的默认参数是0，而在IE下是-1(-1表示最后一行)。

为了在chrome浏览器中调用insertRow函数能够得到插入到最后一行的效果，可利用原型机制在代码替换脚本中定义针对浏览器版本为chrome浏览器情况下的替换实现代码。当chrome浏览器在执行程序到insertRow函数时，则可执行该代码替换脚本中定义的替换后的代码，从而使得insertRow函数在chrome浏览器中的执行效果与IE和firefox相一致。

例如，可以在代码替换脚本中如下定义代码：

也就是说，chrome浏览器在解析到HTMLTableElement对象的insertRow函数时，将不会直接执行chrome内核中javascript引擎定义的insertRow的函数实体，而是代码替换脚本中定义的替代的代码，即在没有参数输入时，调用chrome内核定义的insertRow的函数实体，并将传入参数设置为-1。使得在各个浏览器下，移动的均为表格的最后一行。

综上可以看出，程序开发人员或维护人员只需要根据不同浏览器之间的差异，预先在代码替换脚本中定义存在兼容性问题的属性调用和函数调用的实现代码，然后在网页的起始位置加载该代码替换脚本，即可使得各种浏览器在解析现有的已完成的javascript代码以及后续开发将要生成的javascript代码时，能够通过转而执行代码替换脚本中定义的替换的实现代码而避免兼容性问题造成的浏览器运行不正常的情况。也就是说，程序开发人员和程序维护人员只需要定义一份代码替换脚本，而不需要对整个web程序中的所有javascript代码进行替换和修改，因此维护开销较小，而且出错的几率较小。

进一步的，加载预设的代码替换脚本的步骤为：获取网页中定义的代码替换脚本的链接，通过网络抓取与链接对应的代码替换脚本进行加载。

也就是说，程序开发人员或维护人员可将定义的代码替换脚本存储在网盘、web存储服务器或第三方存储服务器上，然后获取其链接。可在多个web应用中，将该链接定义在网页的script标签的src属性中。使得程序开发人员或维护人员在修改或更新版本时，只需更新网盘、web存储服务器或第三方存储服务器上存储的代码替换脚本，即可使得该多个web应用均得到更新，从而提高了开发效率。

在一个实施例中，如图6所示，一种多浏览器平台执行javascript脚本的装置，包括：

转换脚本加载模块102，用于加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码。

执行语句获取模块104，用于接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用。

浏览器版本获取模块106，用于获取浏览器版本信息。

代码替换执行模块108，用于根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。

在本实施例中，代码转换执行模块108还用于在所述执行语句为属性调用时，调用所述代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

在本实施例中，代码转换执行模块108还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制添加的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在本实施例中，代码转换执行模块108还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制替换的与所述函数对应的与所述浏览器版本信息适配的实现代码。

在本实施例中，转换脚本加载模块102还用于获取网页中定义的代码替换脚本的链接，通过网络抓取与所述链接对应的代码替换脚本进行加载。

综上可以看出，程序开发人员或维护人员只需要根据不同浏览器之间的差异，预先在代码替换脚本中定义存在兼容性问题的属性调用和函数调用的实现代码，然后在网页的起始位置加载该代码替换脚本，即可使得各种浏览器在解析现有的已完成的javascript代码以及后续开发将要生成的javascript代码时，能够通过转而执行代码替换脚本中定义的替换的实现代码而避免兼容性问题造成的浏览器运行不正常的情况。也就是说，程序开发人员和程序维护人员只需要定义一份代码替换脚本，而不需要对整个web程序中的所有javascript代码进行替换和修改，因此维护或移植的开销较小，而且出错的几率较小。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种多浏览器平台执行javascript脚本的方法，包括：

加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码，所述属性调用和/或函数调用的实现代码是指存在兼容性问题的属性调用和/或函数调用的实现代码；

接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用；

获取浏览器版本信息；

根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。

2.根据权利要求1所述的多浏览器平台执行javascript脚本的方法，其特征在于，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为属性调用时，调用所述代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

3.根据权利要求1所述的多浏览器平台执行javascript脚本的方法，其特征在于，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制添加的与所述函数对应的与所述浏览器版本信息适配的实现代码。

4.根据权利要求1所述的多浏览器平台执行javascript脚本的方法，其特征在于，所述根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行的步骤包括：

在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制替换的与所述函数对应的与所述浏览器版本信息适配的实现代码。

5.根据权利要求1所述的多浏览器平台执行javascript脚本的方法，其特征在于，所述加载预设的代码替换脚本的步骤为：

获取网页中定义的代码替换脚本的链接，通过网络抓取与所述链接对应的代码替换脚本进行加载。

6.一种多浏览器平台执行javascript脚本的装置，其特征在于，包括：

转换脚本加载模块，用于加载预设的代码替换脚本，所述代码替换脚本中定义有通过javascript原型机制定义的与浏览器版本适配的属性调用和/或函数调用的实现代码，所述属性调用和/或函数调用的实现代码是指存在兼容性问题的属性调用和/或函数调用的实现代码；

执行语句获取模块，用于接收javascript执行指令，获取相应的执行语句，所述执行语句包括属性调用和/或函数调用；

浏览器版本获取模块，用于获取浏览器版本信息；

代码替换执行模块，用于根据浏览器版本信息调用所述代码替换脚本中定义的与所述属性调用和/或函数调用对应的实现代码执行。

7.根据权利要求6所述的多浏览器平台执行javascript脚本的装置，其特征在于，所述代码转换执行模块还用于在所述执行语句为属性调用时，调用所述代码替换脚本中通过原型set函数或原型get函数定义的属性获取函数或属性赋值函数。

8.根据权利要求6所述的多浏览器平台执行javascript脚本的装置，其特征在于，所述代码转换执行模块还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制添加的与所述函数对应的与所述浏览器版本信息适配的实现代码。

9.根据权利要求6所述的多浏览器平台执行javascript脚本的装置，其特征在于，所述代码转换执行模块还用于在所述执行语句为函数调用时，调用所述代码替换脚本中通过原型机制替换的与所述函数对应的与所述浏览器版本信息适配的实现代码。

10.根据权利要求6所述的多浏览器平台执行javascript脚本的装置，其特征在于，所述转换脚本加载模块还用于获取网页中定义的代码替换脚本的链接，通过网络抓取与所述链接对应的代码替换脚本进行加载。