後臺框架左側在IE9下顯示不正確的解決及IE瀏覽器型別檢測
阿新 • • 發佈：2019-02-10
一個專案後臺，框架結構，已相容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內容
解決辦法是通過判斷瀏覽器型別，如果是IE9，則通過jQuery在DOM載入結束或改變視窗大小的時候動態改變left.php所在iframe的容器table（id="a"）的高度<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" onclick="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>
更改後的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.onresize=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" onclick="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。具體變化可以參考下表：
| 瀏覽器 | IE6 | IE7 | IE8 | IE8相容性檢視 | IE9 | IE9相容性檢視 |
| documentMode | undefined | undefined | 8 | 7 | 9 | 7 |
在使用開發人員工具手動修改“文件模式”時，documentMode 的值也會跟著改變。