今天碰到这个极度郁闷的报错,搞了大半下午,才发现是ie的问题,忍不住大骂。例子是这样的:页面中有多处能出发菜单,并且菜单出现在触发点的旁边,为保证页面上不能同时显示两个以上的菜单,我的做法是隐藏一个div,用作菜单容器。每个触发点根据实际情况在菜单容器里innerHTML各种html代码,再用appechChild方法把菜单续加到(其实就是剪切)到触发点的旁边。代码如下:
<script type="text/javascript">
function product(obj){
var menu = document.getElementById("abc");
menu.style.display = "";
menu.innerHTML = "产品的菜单";
obj.parentNode.appendChild(menu);
}
function news(obj){
var menu = document.getElementById("abc");
menu.style.display = "";
menu.innerHTML = "新闻的菜单";
obj.parentNode.appendChild(menu);
}
</script>
<div id="abc" style="border:1px solid #000; background:#eee; position:absolute; display:none; height:200px; font-size:12px; padding:1em"></div>
<p><input type="button" value="产品" onclick="product(this)"></p>
<p style="margin-left:130px"><input type="button" value="新闻" onclick="news(this)"></p>
上面两个函数仅仅2个中文字符不同,但触发其中任一个函数,再触发第二个,就会报“未知的运行时错误”,相当诡异。左看右看,都没看出什么破绽,RPWT?No way!即刻询问谷歌,答曰“innerHTML 对下面的对象只读: COL,COLGROUP,FRAMESET,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TITLE,TR”,谷歌似乎也不太清楚,真晕,这个让人费神的破IE。谷歌虽然没有爽快地告诉我答案,却也才知道原来ie下还有innerHTML属性为只读的元素,瀑布汗~~~,根据这一启发,修改了几次页面的标签,有了一个惊人的发现,只要把触发点父节点p元素改用div元素,程序立马正常!hoho~~~,原来div与p除了语义不同,其作为文档对象(xml节点)的属性也不同。无语~
2.IE 下 使用appendChild 添加input type="radio" 时无效解决方法:
function createElement(parObj , oTag , oType , oName)
{
var element = null;
try
{
element = document.createElement("<" + oTag + " name=\"" + oName + "\">");
}
catch(e)
{
element = document.createElement(oTag);
element.name = oName;
}
if(oType)
{
element.type = oType;
}
return parObj.appendChild(element);
}