js浏览器兼容性记录

最新推荐文章于 2024-07-23 13:46:18 发布

孙行者悟空

最新推荐文章于 2024-07-23 13:46:18 发布

阅读量547

点赞数

分类专栏： JS 文章标签： js 浏览器兼容

本文链接：https://blog.csdn.net/jj88888/article/details/38980719

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

测试代码：

复制代码代码如下:

 
 <table id="test"> 
 
 </table> 
 
 <script> 
 
 var oTable=document.getElementById("test"); 
 
 oTable.innerHTML="<tr><td>innerHTML</td></tr>"; 
 
 </script>

上述代码在IE6-9中无效，直接报错：
　　IE9：Invalid target element for this operation.
　　IE6-8：Unknown runtime error
　　查找IE的文档( http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx)后发现有这么一段：

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

所以只能用其他方案解，我的方案：

复制代码代码如下:

 
 var oTable=document.getElementById("test"); 
 
 //oTable.innerHTML="<tr><td>innerHTML</td></tr>"; 
 
 setTableInnerHTML(oTable,"<tr><td>innerHTML</td></tr>"); 
 
 function setTableInnerHTML(table, html) { 
 
 if(navigator && navigator.userAgent.match(/msie/i)){ 
 
 var temp = table.ownerDocument.createElement('div'); 
 
 temp.innerHTML = '<table><tbody>' + html + '</tbody></table>'; 
 
 if(table.tBodies.length == 0){ 
 
 var tbody=document.createElement("tbody"); 
 
 table.appendChild(tbody); 
 
 } 
 
 table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]); 
 
 } else { 
 
 table.innerHTML=html; 
 
 } 
 
 }

这里只是对table做了处理，对其他不支持的元素可以用类似的方案。

　　另外，IE10中table已经支持innerHTML了。

<!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=gbk" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>
</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">恭喜你！<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>

getElementsByTagName是获取标签名，你这个写法获取的是<a></a>的数量，所以是0。你可以写个方法

 
      function 
       getElementsByClassName(n) { 
     
      var 
      classElements = [],allElements = document.getElementsByTagName( 
      'div' 
      ); 
      //所有div 
     
      for 
      ( 
      var 
       i=0; i< allElements.length; i++ ) 
     
      { 
     
      if 
      (allElements[i].className == n ) { 
     
      classElements[classElements.length] = allElements[i]; 
     
      } 
     
      } 
     
      alert(classElements.length); 
     
      return 
      classElements; 
     
      } 
     
      //调用 
     
      getElementsByClassName( 
      "a" 
      );