跨浏览器的兼容.ppt

第13章 跨浏览器的兼容性问题,在开发Ajax应用程序时，开发者往往遇到程序代码在不同浏览器下不兼容的问题。在某个浏览器中能正常运行的程序，到了另外一个浏览器下就完全无法工作。这是因为不同浏览器的内核不同，而在JavaScript解析上存在差异。当前主流的浏览器主要基于两种内核：IE和Gecko。IE内核的浏览器主要包括IE系列的各版本浏览器以及像腾讯TT、傲游这类以IE内核为基础二次开发的浏览器。Gecko内核的浏览器主要包括Firefox、Netscape等浏览器。本章将以IE和Firefox为例，来对浏览器的兼容性问题做一个汇编总结。,13.1 使用getElementById代替idName,在IE中，获得一个元素对象的引用，可以直接使用该元素对象的id，以下代码在IE中可以正常运行。,13.2 表单元素的引用问题,在IE下，通过表单获得某个表单元素的引用，可以使用form.item(“itemName”)，如下代码在IE中可以正常运行。,13.3 访问集合对象成员的问题,在IE中，对集合对象的成员的访问，可以使用圆括号加索引的方式。,13.4 读取自定义属性的问题,在一些应用场合，为了程序处理的需要，会给HTML元素添加一些自定义属性，如下所示。 ,13.5 常量的定义问题,Firefox支持使用const定义常量，但是IE不支持，如下所示。,13.6 input元素的type属性读写问题,在Firefox下，input元素的type属性是可读写的，这个特性使得可以动态改变input元素的形态，如下所示。,13.7 模态窗口的问题,在IE下，可以使用showModalDialog来创建模态窗口。原窗口可以给模态窗口传递参数，并接受模态窗口返回的值。模态窗口在关闭前不能失去焦点。,13.8 frame的操作问题,在IE中，通过window.frameId或者window.frameName都可以获得对frame页面window对象的引用，如下所示。,13.9 innerText的问题,在IE下可以使用innerText属性来读取或设置一个元素内的文本值，如下所示。,13.10 对父元素的引用问题,在IE中对父元素的引用可以使用parentElement和parentNode，但是在Firefox中只能使用parentNode，如下所示。,13.11 getElementsByName的问题,在IE中，如果给div添加name属性，然后通过getElementsByName来查找这些div，则getElementsByName不能正常工作，如下所示。,13.12 outerText的问题,在IE下，HTML元素有outerText属性，其返回值与innerText属性一样，但是如果改写元素的outerText属性，则元素本身会被文本所替换。也就是说，当改变一个元素的outerText属性时，实际上是用一个文本节点替换了元素，如下所示。,13.13 outerHTML的问题,在IE下，读取元素的outerHTML属性，可以得到包含元素及其子孙元素在内的所有HTML表示。如果修改元素的outerHTML属性，则会使用一段新的HTML代码替换原有的元素。替换后，原有的元素会从页面中被删除掉，如下所示。,13.14 小结,本章对Ajax开发中可能遇到的浏览器兼容性问题进行了总结和分析，并辅以实例说明了解决办法。这些兼容性的问题包括：idName的使用、表单元素的引用、集合对象成员的访问、自定义属性的读取、常量的定义、input元素type属性的读写问题、模态窗口的使用、frame元素的操作、父元素的引用、getElementsByName的问题以及innerText、outerText和outerHT