基于Seam和RichFaces的JSF应用IE11会话计时器故障排查

针对你遇到的两个IE11专属问题，结合Seam和RichFaces的特性，给你以下针对性的修复方案：

问题1：window.onload未触发，手动调用initCountdown()才正常 #

IE11对原生window.onload的触发时机和现代浏览器有差异，尤其是在JSF（组件异步渲染）+ Seam（上下文初始化）的环境下，原生load事件可能在页面的JSF组件、隐藏域还未完全渲染时就触发了，导致initCountdown()读取不到必要的参数。

解决方案： #

1. 改用Seam内置的页面加载事件
   Seam提供了s:onload标签，会确保在Seam上下文初始化完成、所有JSF组件渲染完毕后再执行指定脚本，比原生window.onload更可靠：

   <!-- 在header.xhtml或者模板页的合适位置添加 -->
   <s:onload>initCountdown();</s:onload>
   

2. 兼容式事件监听替代直接赋值
   如果不想用Seam标签，可改用事件监听的方式绑定加载事件，避免被其他脚本覆盖window.onload：

   // 在script.js中替换原window.onload赋值
   function bindLoadEvent() {
       if (window.addEventListener) {
           window.addEventListener('load', initCountdown, false);
       } else if (window.attachEvent) { // 兼容IE11及更早版本
           window.attachEvent('onload', initCountdown);
       }
   }
   bindLoadEvent();
   

3. 检查隐藏域的渲染时机
   确保存储超时值的隐藏域是在initCountdown()执行前渲染的，比如把隐藏域放在页面的<h:head>或者<h:body>的最顶部，避免因组件顺序导致读取不到值。

问题2：手动启动计时器后，AJAX请求报错 #

RichFaces的AJAX请求会局部更新DOM，可能导致计时器的全局变量丢失、事件绑定失效，或者IE11中定时器与AJAX回调的执行上下文冲突。

解决方案： #

1. 将计时器变量挂载到window对象
   确保计时器的ID不会被AJAX局部刷新重置，把变量存在全局的window对象下：

   // script.js中修改计时器相关代码
   window.sessionTimeoutTimer = null;
   
   function resetInactivityTimer() {
       // 先清除已有计时器
       if (window.sessionTimeoutTimer) {
           clearTimeout(window.sessionTimeoutTimer);
       }
       // 读取隐藏域值，增加容错处理
       var timeoutField = document.getElementById('timeoutHiddenField');
       var timeoutSeconds = timeoutField ? parseInt(timeoutField.value) : 300; // 默认5分钟
       if (isNaN(timeoutSeconds)) timeoutSeconds = 300;
   
       // 重新设置计时器
       window.sessionTimeoutTimer = setTimeout(function() {
           // 你的超时逻辑，比如跳转或提示
           alert('会话即将超时，请操作页面重置');
       }, timeoutSeconds * 1000);
   }
   

2. 全局绑定AJAX完成事件
   用RichFaces的rich:jQuery监听所有AJAX请求的完成事件，确保每次AJAX后都重置计时器，避免IE11中的冲突：

   <!-- 在模板页中添加，全局监听AJAX完成 -->
   <rich:jQuery targetDocument="true" selector="body" event="ajaxcomplete" handler="resetInactivityTimer();" />
   

   或者在单个a4j:commandButton/a4j:ajax中指定oncomplete：

   <a4j:commandButton value="提交" action="#{bean.submit}" oncomplete="resetInactivityTimer();" />
   

3. 排查Typeconflict错误
   你提到替换绑定方式时出现“Typeconflict”，大概率是函数/变量名与IE11内置对象或Seam/RichFaces的内置变量重名了：

   • 尝试修改initCountdown、resetInactivityTimer的函数名，比如改成myInitSessionCountdown、myResetSessionTimer
   • 检查全局变量是否有重复定义，比如是否有其他脚本也定义了timerId之类的变量

额外测试建议 #

• 在IE11的开发者工具（F12）中，切换到“控制台”标签，查看initCountdown()执行时是否有报错（比如隐藏域找不到、NaN等）
• 用开发者工具的“调试器”断点跟踪resetInactivityTimer()在AJAX请求前后的执行流程，看变量是否被意外重置

内容的提问来源于stack exchange，提问作者Robert