云南龙网

  1. 首页 > 云知道 > >

JavaScript在IE和FF下的兼容性问题( 三 )

云知道


例如如果上述frame标签写在最上层的window里面的htm里面 ， 那么可以这样访问：
IE： window.top.frameId或者window.top.frameName来访问这个window对象；
Firefox：只能这样window.top.frameName来访问这个window对象 。
【兼容处理】使用frame的name来访问frame对象 ， 另外 ， 在IE和Firefox中都可以使
window.document.getElementById(”frameId”)来访问这个frame对象 。
4. parentElement
【分析说明】IE中支持使用parentElement和parentNode获取父节点 。而Firefox只可以使用parentNode 。
【兼容处理】因为firefox与IE都支持DOM ， 因此统一使用parentNode来访问父节点 。
5. table操作
【分析说明】IE下table中无论是用innerHTML还是appendChild插入tr都没有效果 ， 而其他浏览器却显示正常 。
【兼容处理】解决的方法是 ， 将tr加到table的tbody元素中 ， 如下面所示：
复制代码 代码如下:
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的内容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);

6. 移除节点removeNode()和removeChild()
【分析说明】appendNode在IE和Firefox下都能正常使用 ， 但是removeNode只能在IE下用 。
removeNode方法的功能是删除一个节点 ， 语法为node.removeNode（false）或者node.removeNode（true） ， 返回值是被删除的节点 。
removeNode（false）表示仅仅删除指定节点 ， 然后这个节点的原孩子节点提升为原双亲节点的孩子节点 。
removeNode（true）表示删除指定节点及其所有下属节点 。被删除的节点成为了孤立节点 ， 不再具有有孩子节点和双亲节点 。
【兼容处理】Firefox中节点没有removeNode方法 ， 只能用removeChild方法代替 ， 先回到父节点 ， 在从父节点上移除要移除的节点 。
node.parentNode.removeChild(node);
// 为了在ie和firefox下都能正常使用 ， 取上一层的父结点 ， 然后remove 。
7. childNodes获取的节点
【分析说明】childNodes的下标的含义在IE和Firefox中不同 ， 看一下下面的代码：
复制代码 代码如下:
ul id="main"
li1/li
li2/li
li3/li
/ul
input type=button value="https://www.rkxy.com.cn/dnjc/click me!" onclick=
"alert(document.getElementById(’main’).childNodes.length)"

分别用IE和Firefox运行 ， IE的结果是3 ， 而Firefox则是7 。Firefox使用DOM规范 ， "#text"表示文本（实际是无意义的空格和换行等）在Firefox里也会被解析成一个节点 ， 在IE里只有有实际意义的文本才会解析成"#text" 。
【兼容处理】
方法一 ， 获取子节点时 ， 可以通过node.getElementsByTagName()来回避这个问题 。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes ， 因为childNodes能更好的处理DOM的层次结构 。
方法二 ， 在实际运用中 ， Firefox在遍历子节点时 ， 不妨在for循环里加上：
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1 。
这样可以跳过一些文本节点 。
延伸阅读
《IE和FireFox中的childNodes区别》
8. Firefox不能对innerText支持
【分析说明】Firefox不支持innerText ， 它支持textContent来实现innerText ， 不过textContent没有像innerText一样考虑元素的display方式 ， 所以不完全与IE兼容 。如果不用textContent ， 字符串里面不包含HTML代码也可以用innerHTML代替 。也可以用js写个方法实现 ， 可参考《为firefox实现innerText属性》一文 。
【兼容处理】通过判断浏览器类型来兼容：
复制代码 代码如下:
if(document.all){
document.getElementById(’element’).innerText = "my text";

推荐阅读


上一篇：My Secret Folder加密文件夹的操作方法

下一篇：安卓手机怎么投屏到电脑