使用后退按钮时 IE 中的 JavaScript 问题

Question

我有一个表单，用户可以在其中查询两个不同的区域。区域一的表单元素在页面首次加载时默认显示，而区域二的表单元素隐藏。我有一个选择框，用户可以在其中选择他们希望查询的区域，还有一些 JavaScript 可以根据区域显示和隐藏表单的不同部分。

这在 Firefox 和 IE 中运行良好，除非用户在 IE 中按下浏览器后退按钮，这种情况经常发生在用户希望进行稍微不同的查询时。如果用户查询区域二，然后在 IE 中按下后退按钮，区域选择器仍然显示“区域二”，但显示区域一的表单元素。我希望区域二的表单元素仍像 Firefox 那样显示，但如何显示？

以下是我的代码的一个简短示例:

<script language="javascript" type="text/javascript">
<!-- 

 // Switch between regions
 function changeRegionType(form){
  // get the various elements we whish to manipulate
  var reg1 = getElementById('region_1');
  var reg2 = getElementById('region_2');

  // hide one row, show the other
  if (form['region_type'].value == 'region_1') {
   reg1.style.display = '';
   reg2.style.display = 'none';
  } 
  else if (form['region_type'].value == 'region_2') {
   reg1.style.display = 'none';
   reg2.style.display = '';
  }

  }

// --> 
</script>


<form name="QueryForm" action="something.php" method="get">

 <select name="region_type" onChange="changeRegionType(this.form)">
  <option selected value="region_1">Region One</option>
  <option value="region_2">Region Two</option>
 </select>

 <tr id="region_1">
  <!-- Show this row to people who want to query about region 1 -->
 </tr>

 <tr id="region_2" style="display: none;">
  <!-- Show this row to people who want to query about region 2 -->
 </tr>

</form>

Answer 1

表单字段通过后退/前进命令记住它们的值，因此当您返回上一页时，最后选择的值“区域二”会在下拉列表中重新选择，但您不会得到 onchange 告诉你它已经发生了。

因此，您应该在 load 事件中调用 changeRegionType 函数以根据选择更新 DOM。 ISTR 某些浏览器(Opera？)实际上会在 onload 之后更新表单，因此可能需要在 onload 中的 0 超时时触发该函数。

由于 bfcache，您在 Firefox 中看不到相同的内容。这会在您离开时保留上一页，只是不显示。当您返回它时，它可以取消隐藏现有页面 DOM，就好像它从未离开过一样。 (这样做是为了提高后退/前进导航的速度。)当 bfcache 被禁用或您的页面由于其他页面排挤而脱离它时，您将看到与 IE 和其他浏览器中相同的行为。 (Safari 4 现在也有类似的 bfcache 功能。)