后台框架左侧在IE9下显示不正确的解决及IE浏览器类型检测

本文链接：https://blog.csdn.net/zm2714/article/details/7920238

一个项目后台，框架结构，已兼容IE6、IE7、IE8、firefox、Chrome以及遨游等浏览器，但在IE9下确出现显示问题。如下图所示：

原代码

frameMain.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<frameset rows="98,*,8" cols="*" framespacing="0" frameborder="NO" border="0" id="mainset">
  <frame src="top.php" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
  <frameset rows="*,0" cols="*" framespacing="0" frameborder="NO" scrolling="no"  border="0" id="fset3">
    <frame src="middle.php?folder=public" name="mainFrame" id="mainFrame" />
    <frame src="about:blank" name="download" scrolling="NO" noresize>
  </frameset>
  <frame src="down.php" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes>
</head>
<body></body>
</noframes>
</html>

原middle.php内容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>middle</title>
<style type="text/css">
<!--
body{margin:0px;}
-->
</style>
<script>
function switchSysBar(){
  var locate=location.href.replace('middle.php?folder=<?php echo $folder;?>','');
  var ssrc=document.all("img1").src.replace(locate,'');
  if (ssrc=="images/main_55.gif"){
    document.all("img1").src="images/main_55_1.gif";
    document.all("frmTitle").style.display="none"
  }else{
    document.all("img1").src="images/main_55.gif";
    document.all("frmTitle").style.display=""
  }
}
</script>
</head>
<body style="overflow:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
  <tr>
    <td width="171" id=frmTitle noWrap name="fmTitle" align="center" valign="top">
      <table width="171" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
        <tr>
          <td bgcolor="#1873aa" style="width:6px;"></td>
          <td width="165"><iframe name="I1" height="100%" width="165" src="<?php echo $folder;?>/left.php" border="0" frameborder="0" scrolling="auto">浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
        </tr>
      </table>
    </td>
    <td style="width:6px;" valign="middle" bgcolor="1873aa" οnclick="switchSysBar();"><SPAN title=关闭/打开左栏><img style="cursor:pointer;width:6px;height:40px;" src="images/main_55.gif" name="img1" width=6 height=40 id=img1></SPAN></td>
    <td width="100%" align="center" valign="top"><iframe name="right" height="100%" width="100%" border="0" frameborder="0" src="<?php echo $folder;?>/index.php">浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
  </tr>
</table>
</body>
</html>

解决办法是通过判断浏览器类型，如果是IE9，则通过jQuery在DOM加载结束或改变窗口大小的时候动态改变left.php所在iframe的容器table（id="a"）的高度

更改后的middle.php内容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<title>middle</title>
<style type="text/css">
<!--
body{margin:0px;}
.mian{text-align:center;width:1024px;margin:0 auto;}
-->
</style>
<script>
function changeHeight(){
  $("#a").attr("height",document.documentElement.clientHeight);
}
window.οnresize=changeHeight;
$(document).ready(function(){
  ieMode=document.documentMode;
  var isIE=!!window.ActiveXObject;
  var isIE6=isIE&&!window.XMLHttpRequest;
  var isIE7=isIE&&!isIE6&&!ieMode||ieMode==7;
  var isIE8=isIE&&ieMode==8;
  var isIE9=isIE&&ieMode==9;
  if(isIE9) changeHeight();
});

function switchSysBar(){
  var locate=location.href.replace('middle.php?folder=<?php echo $folder;?>','');
  var ssrc=document.all("img1").src.replace(locate,'');
  if (ssrc=="images/main_55.gif"){
    document.all("img1").src="images/main_55_1.gif";
    document.all("frmTitle").style.display="none"
  }else{
    document.all("img1").src="images/main_55.gif";
    document.all("frmTitle").style.display=""
  }
}
</script>
</head>
<body style="overflow:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
  <tr>
    <td width="171" id=frmTitle noWrap name="fmTitle" align="center" valign="top">
      <table id=a width="171" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
        <tr>
          <td bgcolor="#1873aa" style="width:6px;"></td>
          <td width="165"><iframe name="I1" height="100%" width="165" src="<?php echo $folder;?>/left.php" border="0" frameborder="0" scrolling="auto">浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
        </tr>
      </table>
    </td>
    <td style="width:6px;" valign="middle" bgcolor="1873aa" οnclick="switchSysBar();"><SPAN title=关闭/打开左栏><img style="cursor:pointer;width:6px;height:40px;" src="images/main_55.gif" name="img1" width=6 height=40 id=img1></SPAN></td>
    <td width="100%" align="center" valign="top"><iframe name="right" height="100%" width="100%" border="0" frameborder="0" src="<?php echo $folder;?>/index.php">浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
  </tr>
</table>
</body>
</html>

JavaScript 判断 IE6/IE7/IE8/IE9

ieMode=document.documentMode;
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE7=isIE&&!isIE6&&!ieMode||ieMode==7;
var isIE8=isIE&&ieMode==8;
var isIE9=isIE&&ieMode==9;
if(isIE6){
  alert("正在使用 IE6 浏览器");
};
if(isIE7){
  alert("正在使用 IE7 浏览器，或者当前文档模式为 IE8");
};
if(isIE8){
  alert("正在使用 IE8 浏览器，或者当前文档模式为 IE8")");
};
if(isIE9){
  alert("正在使用 IE9 浏览器，或者当前文档模式为 IE9");
};

在 IE8 之后，IE 添加了 document.documentMode 属性，在 IE7/IE6 及以前的版本中该值都会返回 undefined。具体变化可以参考下表：