Question

我有一个表单，用户可以在其中查询两个不同的区域。首次加载页面时默认显示区域1的表单元素，而隐藏区域2的表单元素。我有一个选择框，用户可以在其中选择他们想要查询的区域，以及一些JavaScript来显示和隐藏表单的不同部分，具体取决于区域。

这在Firefox和IE中工作正常，除非用户在IE中按下浏览器后退按钮，这通常发生在用户希望稍微不同的查询时。如果用户查询了区域2，然后按下IE中的后退按钮，区域选择器仍然显示“区域2”，但显示区域1的表单元素。我希望第二区的表单元素仍像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

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

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

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

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

1 个答案: