电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: RichFaces 3.3.3 引起的 IE 兼容性问题及解决方案 [打印本页]

作者: look_w 时间: 2018-11-18 19:15 标题: RichFaces 3.3.3 引起的 IE 兼容性问题及解决方案

引言RichFaces 是一个具有 Ajax 和 JSF 特性的 Web 框架，它提供了一套用户界面的控件，用过 RichFaces 的朋友都会对其丰富的功能和易学易用的特性所吸引，可以说它是一套非常适合开发企业级 Web 应用的框架。然而，只要是 Web 应用就绕不开浏览器的兼容性问题。
现象描述浏览器兼容性问题是指不同的浏览器对同一段代码有不同解析，最常见的是 JS 脚本的不同，若只针对 IE 浏览器进行开发，那么很可能造成火狐浏览器对这段代码无效或报错。不过对于 JavaScript、CSS 这种不需要第三方类库支持的的脚本语言，如果遇到兼容性问题，那么可以直接进行修改，只要做好浏览器的判断，再针对不同浏览器运行不同的代码即可；此外，我们还可以采用一些通用的代码来避免这样的问题。
除了不同浏览器之间的兼容性问题，IE 浏览器的各个版本也有兼容性问题。当 RichFaces 框架遇到 IE 兼容性问题时解决起来相对复杂。我采用的是一个较为流行的 Richfaces 版本——RichFaces 3.3.3，这个版本是一个较为稳定且资料较多的版本，因此长期使用。但是，随着浏览器特别是 IE 浏览器不断的更新换代，3.3.3 这个版本逐渐出现了不兼容的现象，这种现象主要出现在 IE8 以上的浏览器版本中。主要遇到的现象有两个（应该还有其他的问题，但是由于用到的地方不多，很多也都采用变相实现的方式进行了技术屏蔽）。第一个现象，是利用<rich:modelPanel>标签，弹出提示框时，发现 IE9 及以上会出现弹出效果为虚框，好像在弹出框上面又有一层蒙版，让其不够清晰。如图所示：
图 1. 现象一

第二个现象是<a4j:commandButton>按钮点击无效。点击后不响应后台的操作，且若有流转页面的动作，也不会进行页面流转。
解决方案针对以上两个现象，我开始寻找解决问题的方案，其实方案很简单，主要就是三种。第一、直接升级 RichFaces；第二、设置 IE 浏览器的兼容性视图，避开此问题；第三、发现问题解决问题。这里我们逐一来分析一下三种方式的适用场景：

第一、直接升级 RichFaces，将 3.x 版本升级到 4.x。这样做一定是一个一劳永逸的方式。如果是新项目，自然可以采用这个方法，新版本一定比旧版本性能更高、功能更强大。这里所说到的新项目是基于零编码下的新项目，从头开始开发自然选用最新的版本。然而，大部分项目都是有了一定的技术积累，在这种情况下，若冒然升级，势必会带来较大的影响，更何况 RichFaces 3.x 和 4.x 的差异较大，升级有一定的难度，为此 JBoss 专门写了一篇。
第二、设置 IE 浏览器兼容性。这是一个简单而行之有效的办法。我在对各大论坛进行搜索并寻求解决方案时，发现这种方式是最多、最普遍的答案。最初，我也是采取这种方式，并且为了让用户不忘记设置兼容性，还特意通过 JS 脚本来判断用户是否进行了兼容性视图的设置，如果未设置则弹出设置向导，并要求用户进行浏览器的兼容性设置。（试想一下，如果我是用户，可能也会觉得系统不够友好吧。）这种解决问题的方法最大的弊端是牺牲了 IE 高版本的优势，比如 IE 高版本的性能更快、支持 H5 等新技术。项目组如果又用到了 H5 相关的技术框架，例如 echarts 图表框架，那么问题就来了，如何能够让 H5 技术和 RichFaces 3.3.3 都能良好的运行呢？显然，利用兼容性解决问题无法满足两个技术的同时使用。
第三、发现问题解决问题。也就是针对发现的两个兼容性问题进行具有针对性的解决。这种方式既可以避免升级带来的大动作，也可以避免设置兼容性从而降低 IE 性能和用户友好性，是目前较为理想的解决方案。

问题处理根据上文提到的两个现象，分别分析解决如下：
问题一：按钮点击无效按钮问题又分为两种情况，第一种是两个<a4j:commandButton>标签连用时，后一个流转无效。找到在线文档 3.3.x 中提到"Common JSF navigation could be performed after an Ajax submit and partial rendering，but Navigation Case must be defined as <redirect/>"in order to avoid problems with some browsers."这句话的意思就是某些浏览器中使用 <a4j:commandButton>标签时会遇到流转的问题，这时候可以在配置文件中加入<redirect/>标签来解决。此方法可行，具体配置位置如下代码所示：
图 2.redirect 配置方法

由于按钮默认是 forward 流转，本身比重定向 redirect 方式要快，因此若能不用 redirect 方式则尽量不用，因此我在遇到这样的问题时，就通过利用<h:commandButton>来替换，h 标签是 jsf 的基本标签，默认也是 forward 方式，这样也解决这个问题。
如果通过上述方式操作后，按钮仍然点不动，这时候很可能出现了兼容性问题。需要修改 RichFaces 的代码了。无论是哪种兼容性问题，最终处理的方法是一致的，处理方法与问题二相同。
问题二：<rich:modelPanel>弹出框被遮罩
这类问题可能会有很多，通过 F12 开发者视图中可以看到一些错误，类似如下所示：
图 3. 问题截图

或者（现象一中也可能会引起如下的错误信息）：
图 4. 问题截图

以上原因，除了第一种现象的第一种情况采用<redirect/>解决外，剩下的问题主要是 RichFaces 3.3.3 中采用了 Ajax 框架 Sarissa 引起的兼容性问题。这个框架需要进行对高版本 IE 的兼容。在这里参考了 Marko Wallin 博客中的解决方法，对 RichFaces 框架中的 AJAX.js 文件进行了修改，更新 Sarssa 的部分的代码。修改后可继续顺利使用 RichFaces 3.3.3。
AJAX.js 文件位于 richfaces-impl-3.3.3.Final.jar/org/ajax4jsf/javascript/scripts/AJAX.js 中。可以修改后打到 jar 包中，也可以将其放在项目下，位置是 src 路径下的 org/ajax4jsf/javascript/scripts/AJAX.js 位置。文件主要修改内容如下所示：
图 5. 修改内容 1

图 6. 修改内容 2

图 7. 修改内容 3

从上面的代码可以看出修改的主要目的就是让 Sarrssa 兼容 IE9 及以上版本。主要修改的代码思路是判断 useragent 对象，其中 IE9 以上的版本此对象的值变成了"like gecko"，而不是以往的"mise"，因此脚本需要增加对新浏览器判断。
结束语本文主要参考的资料是 RichFaces 3.3.3 的在线 API 以及 Marko Wallin 的 blog，同时，我还关注了 JBossDevelpoer 中开发者对 RichFaces 框架提出的一系列问题以及相关的解决方案，我强烈建议大家可以在 JBossDeveloper 中搜索遇到的问题，从而获得相应的答案。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)