【发布时间】：2009-11-23 14:34:23
【问题描述】：
我在使用 ie7（兼容模式下的 ie8）时遇到了一个奇怪的问题。 我有 div 容器，我在其中使用 javascript innhtml 更新值来更新值。这在 Firefox 和 ie8 中运行良好。在 ie7 中，值不会更新，但如果单击值并突出显示它们，它们就会更新，如果更改浏览器的高度，则在下一次更新时，值会正确更新。
我发现如果我将外部 div 容器的位置属性从相对更改为静态，那么更新工作正常。
可以在这里查看页面http://islendingasogur.net/test/webmap_html_test.html 在打开兼容性的 Internet Explorer 8 中，您可以看到灰色框中的时间戳仅更新一次，之后您看不到任何更改。右下角的时间戳每 10 秒更新一次。但是，如果您突出显示灰色框中的文本，则会出现更新的时间戳值！
这是页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT"/>
<title>innerhtml problem</title>
<script type="text/javascript">
<!--
var alarm_off_color = '#00ff00';
var alarm_low_color = '#ffff00';
var alarm_lowlow_color = '#ff0000';
var group_id_array = new Array();
var var_alarm_array = new Array();
var timestamp_color = '#F3F3F3';
var timestamp_alarm_color = '#ff00ff';
group_id_array[257] = 0;
function updateParent(var_array, group_array) {
//Update last update time
var time_str = "Last Reload Time: ";
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if(minutes < 10)
{minutes = "0" + minutes;}
if(seconds < 10)
{seconds = "0" + seconds;}
time_str += hours + ":" + minutes + ":" + seconds;
document.getElementById('div_last_update_time').innerHTML = time_str;
//alert(time_str);
alarm_var = 0;
//update group values
for(i1 = 0; i1 < var_array.length; ++i1)
{
if(document.getElementById(var_array[i1][0]))
{
document.getElementById(var_array[i1][0]).innerHTML = unescape(var_array[i1][1]);
if(var_array[i1][2]==0)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_off_color}
else if(var_array[i1][2]==1)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_low_color}
else if(var_array[i1][2]==2)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_lowlow_color}
//check if alarm is new
var_id = var_array[i1][3];
if(var_array[i1][2]==1 && var_array[i1][4]==0)
{
alarm_var = 1;
}
else if(var_array[i1][2]==2 && var_array[i1][4]==0)
{
alarm_var = 1;
}
}
}
//Update group timestamp and box alarm color
for(i1 = 0; i1 < group_array.length; ++i1)
{
if(document.getElementById(group_array[i1][0]))
{
//set timestamp for group
document.getElementById(group_array[i1][0]).innerHTML = group_array[i1][1];
if(group_array[i1][4] != -1)
{
//set data update error status
current_timestamp_color = timestamp_color;
if(group_array[i1][4] == 1)
{current_timestamp_color = timestamp_alarm_color;}
document.getElementById(group_array[i1][0]).style.backgroundColor = current_timestamp_color;
}
}
}
}
function update_map(map_id) {
document.getElementById('webmap_update').src = 'webmap_html_test_sub.html?first_time=1&map_id='+map_id;
}
-->
</script>
<style type="text/css">
body {
margin:0;
border:0;
padding:0px;background:#eaeaea;font-family:verdana, arial, sans-serif;
text-align: center;
}
A:active { color: #000000;}
A:link { color: #000000;}
A:visited { color: #000000;}
A:hover { color: #000000;}
#div_header {
/*position: absolute;*/
background: #ffffff;
width: 884px;
height: 60px;
display: block;
float: left;
font-size: 14px;
text-align: left;
/*overflow: visible;*/
}
#div_container{
background: #ffffff;border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
float: left; width: 884px;}
#div_image_container{
position: relative;
width: 884px;
height: 549px;
background: #ffffff;
font-family:arial, verdana, arial, sans-serif;
/*display: block;*/
float:none!important;
float/**/:left;
border:1px solid #00ff00;
padding: 0px;
}
.div_group_box{
position: absolute;
width: -2px;
height: -2px;
background: #FFFFFF;
opacity: 1;
filter: alpha(opacity=100);
border:1px solid #000000;
font-size: 2px;
z-index: 0;
padding: 0px;
}
.div_group_container{
position: absolute;
opacity: 1;
filter: alpha(opacity=100);
z-index: 5;
/*display: block;*/
/*border:1px solid #000000;*/
}
.div_group_container A:active {text-decoration: none; display: block;}
.div_group_container A:link { color: #000000;text-decoration: none; display: block;}
.div_group_container A:visited { color: #000000;text-decoration: none; display: block;}
.div_group_container A:hover { color: #000000;text-decoration: none; display: block;}
.div_group_header{
background: #17B400;
border:1px solid #000000;font-size: 12px;
color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
.div_var_name_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
display: block;
text-align: left;
}
.div_var_name{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
display: block;
}
.div_var_value_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: center;
}
.div_var_value{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_var_unit_container{
color: #000000;background: #FFFFFF;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: left;
}
.div_var_unit{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_timestamp{
float: none;
color: #000000;background: #F3F3F3;
border:1px solid #000000;font-size: 12px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
clear: left;
z-index: 100;
position: relative;
}
#div_last_update_time{
height: 14px;
width: 210px;
text-align: right;
padding: 1px;
font-size: 10px;
float: right;
}
.copyright{
height: 14px;
width: 240px;
text-align: left;
color: #777;
padding: 1px;
font-size: 10px;
float: left;
}
a img {
border: 1px solid #000000;
}
.clearer { clear: both; display: block; height: 1px; margin-bottom: -1px; font-size: 1px; line-height: 1px; }
</style>
</head>
<body onload="update_map(1)">
<div id="div_container"><div id="div_header"></div><div class="clearer"></div><div id="div_image_container"><img id="map" src="Images/maps/0054_gardabaer.jpg" title="My map" alt="" align="left" border="0" usemap ="#_area_links" style="padding: 0px; margin: 0px;" />
<div id="group_container_257" class="div_group_container" style="visibility:visible; top:10px; left:260px; cursor: pointer;">
<div class="div_group_header" style="clear:right">Site</div>
<div class="div_var_name_container">
<div id="group_name_257_var_8" class="div_var_name" >variable 1</div>
<div id="group_name_257_var_7" class="div_var_name" style="border-top:1px solid #000000;">variable 2</div>
<div id="group_name_257_var_9" class="div_var_name" style="border-top:1px solid #000000;">variable 3</div>
</div>
<div class="div_var_value_container">
<div id="group_value_257_var_8" class="div_var_value" >0</div>
<div id="group_value_257_var_7" class="div_var_value" style="border-top:1px solid #000000;">0</div>
<div id="group_value_257_var_9" class="div_var_value" style="border-top:1px solid #000000;">0</div>
</div>
<div class="div_var_unit_container">
<div id="group_unit_257_var_8" class="div_var_unit" >N/A</div>
<div id="group_unit_257_var_7" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
<div id="group_unit_257_var_9" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
</div>
<div id="group_257_timestamp" class="div_timestamp" style="">-</div>
</div>
</div><div class="clearer"></div><div class="copyright">© Copyright</div><div id="div_last_update_time">-</div>
</div>
<iframe id="webmap_update" style="display:none;" width="0" height="0"></iframe></body>
</html>
类 div_var_value、div_timestamp 和 div_last_update_time 的 div 都由 javascript 函数更新。 div“div_image_container”似乎是造成这种情况的原因，至少如果我将它的位置属性从相对于静态更改，则值会正确更新
这是更新值的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
<!--
window.onload = doLoad;
function refresh()
{
//window.location.reload( false );
var _random_num = Math.floor(Math.random()*1100);
window.location.search="?map_id=54&first_time=0&t="+_random_num;
}
var var_array = new Array();
var timestamp_array = new Array();
var_array[0] = Array('group_value_257_var_9','41.73',-1, 9, 0);
var_array[1] = Array('group_value_257_var_7','62.48',-1, 7, 0);
var_array[2] = Array('group_value_257_var_8','4.24',-1, 8, 0);
var current_time = new Date();
var current_time_str = current_time.getHours();
current_time_str += ':'+current_time.getMinutes();
current_time_str += ':'+current_time.getSeconds();
timestamp_array[0] = Array('group_257_timestamp',current_time_str,'box_group_container_206',-1, -1);
//timestamp_array[0] = Array('group_257_timestamp','11:33:16 23.Nov','box_group_container_257',-1, -1);
window.parent.updateParent(var_array, timestamp_array);
function doLoad()
{
setTimeout( "refresh()", 10*1000 );
}
//-->
</script>
</head>
<body>
</body>
</html>
我编辑了帖子并添加了指向相关网页的链接，我还在 Internet Explorer 7 中测试了该网页，但该错误并未出现在那里。我只在打开兼容性的 ie8 中看到过这个错误。
如果有人以前见过这个并有解决办法，我将不胜感激。
谢谢。
【问题讨论】：
-
如果你有一个更简洁的例子会很有帮助。它甚至可以帮助您弄清楚发生了什么。
标签： javascript internet-explorer innerhtml