IE与Mozilla下DHTML的一些区别
Mozilla网站上讲的:http://developer.mozilla.org/cn/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla
IBM develop:http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/
1.DOM上的接口基本上还是一致的,但经测试发现mozilla下的DOM更标准些,就算些法一样,IE下会有一些微小的区别,但无关要紧
2.事件模型上,这方面区别算比较大.
mozilla下的e.target 相当于 ie下的event.srcElement,但细节上有区别,后者是返回一个html element
而e.target返回的是个节点,也就是说包括文本节点,方法可以这样
var trg = e.target;
while(trg.nodeType!=1)trg=trg.parentNode;
mozilla下的e.which与ie下的event.keyCode相当
相对应的还有e.layerX,e.layerY,e.pageX,e.pageY...
可以看看http://fason.nease.net/moz... ? ?event部份
事件绑定上mozilla用addEventListener,removeEventListener,对应ie的attachEvent,detatchEvent
3.对象引用上就直接document.getElementById就行了,如果还要兼容ie4,可以再加上document.all判断
form element的引用要标准些var oInput = document.formName.elements["input1"]
4.XML的应用上区别更大些,因为IE下是通过activex来创建,而mozilla已经是有这些对象的(需要dom2支持)
Xmldomdocument: ? var doc = document.inplementation.createDocument("","",null)
xmlhttp: ? ? ? ? var req = new XMLHttpRequest()
5.innerText就在mozilla不支持了,需要用些range的技巧来取得它的text
6.insertAdjacentHTML是个比较好用的方法,mozilla可以用DOM的方法insertBefore来兼容
7.更细微的,如Array,Date的一些方法ie和mozilla也会有一些微小的区别,具体不提到了。。。
8.删除一个对象,用DOM的做法是
var p = obj.parentNode;
p.removeChild(obj);
9.select 的option增加和删除看看,不用add和remove
http://fason.nease.net/sam...
10.mozilla中处理右键问题,dom2已经支持oncontextmenu,不用e.which == 2来判断
11.ie下的opacity,mozilla怎么处理??
答:
obj.style.MozOpacity = 0.5;// ?.opacity-css { -moz-opacity:0.5 }
12.
在ie下改变script的src可以直接obj.src="XXX.js",mozilla不行,要remove掉再create一个才能生效.
13.ie下的obj.currentStyle.xxx,mozilla下用
document.defaultView.getComputedStyle(obj, '').getPropertyValue("xxx")
写了两个例子:
1. 对于通过ID取对象
function getObjectById(id)
{
?if (typeof(id) != "string" || id == "") return null;
?if (document.all) return document.all(id);
?if (document.getElementById) return document.getElementById(id);
?try {return eval(id);} catch(e){ return null;}
}
2. 对事件附加处理函数
?if(document.attachEvent)
? ?window.attachEvent("onresize", function(){reinsert();});
?else
? ?window.addEventListener('resize', function(){reinsert();}, false);
注意在IE里是 onclick 而在firefox NS 里则是 click !
动态更改CSS IE跟Mozilla可以这样
给link设定id,
然后通过脚本来设置
引用
国庆样式
圣诞样式
处理XML的方法
var FCKXml = function()
{}
FCKXml.prototype.GetHttpRequest = function()
{
if ( window.XMLHttpRequest )// Gecko
return new XMLHttpRequest() ;
else if ( window.ActiveXObject )// IE
return new ActiveXObject("MsXml2.XmlHttp") ;
}
FCKXml.prototype.LoadUrl = function( urlToCall, asyncFunctionPointer )
{
var oFCKXml = this ;
var bAsync = ( typeof(asyncFunctionPointer) == 'function' ) ;
var oXmlHttp = this.GetHttpRequest() ;
oXmlHttp.open( "GET", urlToCall, bAsync ) ;
if ( bAsync )
{
oXmlHttp.onreadystatechange = function()
{
if ( oXmlHttp.readyState == 4 )
{
oFCKXml.DOMDocument = oXmlHttp.responseXML ;
asyncFunctionPointer( oFCKXml ) ;
}
}
}
oXmlHttp.send( null ) ;
if ( ! bAsync && oXmlHttp.status && oXmlHttp.status == 200 )
this.DOMDocument = oXmlHttp.responseXML ;
else
throw( 'Error loading "' + urlToCall + '"' ) ;
}
FCKXml.prototype.SelectNodes = function( xpath, contextNode )
{
if ( document.all )// IE
{
if ( contextNode )
return contextNode.selectNodes( xpath ) ;
else
return this.DOMDocument.selectNodes( xpath ) ;
}
else// Gecko
{
var aNodeArray = new Array();
var xPathResult = this.DOMDocument.evaluate( xpath, contextNode ? contextNode : this.DOMDocument,
this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), XPathResult.ORDERED_NODE_ITERATOR_TYPE, null) ;
if ( xPathResult )
{
var oNode = xPathResult.iterateNext() ;
while( oNode )
{
aNodeArray[aNodeArray.length] = oNode ;
oNode = xPathResult.iterateNext();
}
}
return aNodeArray ;
}
}
FCKXml.prototype.SelectSingleNode = function( xpath, contextNode )
{
if ( document.all )// IE
{
if ( contextNode )
return contextNode.selectSingleNode( xpath ) ;
else
return this.DOMDocument.selectSingleNode( xpath ) ;
}
else// Gecko
{
var xPathResult = this.DOMDocument.evaluate( xpath, contextNode ? contextNode : this.DOMDocument,
this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), 9, null);
if ( xPathResult && xPathResult.singleNodeValue )
return xPathResult.singleNodeValue ;
else
return null ;
}
}
XML应用上区别还有
if(ie){
? ?var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
? ?xmlDoc.async = "false";
? ?xmlDoc.loadXML(xmlText);
}
else{ //mozilla
? ?var parser = new DOMParser();
? ?var xmldoc = parser.parseFromString(xmlText,"text/xml");
}
这些是几个mozilla下没有的属性。
?HTMLElement.prototype.__defineGetter__
?(
? ?"outerHTML",
? ?function()
? ?{
? ? ?var str = "<" + this.tagName;
? ? ?for (var i=0; i
? ? ? ?var attr = this.attributes[i];
? ? ? ?str += " ";
? ? ? ?str += attr.nodeName + "=" + '"' + attr.nodeValue + '"';
? ? ?}
? ? ?str += ">" + this.innerHTML + "" +="" ?="" this.tagname="" /> ? ? ?return str;
? ?}
?);
?HTMLElement.prototype.__defineSetter__
?(
? ?"innerText",
? ?function (anything)
? ?{
? ? ?this.innerHTML = "";
? ? ?var sText = String(anything);
? ? ?var textS = sText.split("\n");
? ? ?for(var i=0; i
? ? ? ?var txtNode = null;
? ? ? ?var retNode = null;
? ? ? ?if(textS[i].length)
? ? ? ? ?txtNode = document.createTextNode(textS[i]);
? ? ? ?if(i
? ? ? ?if(txtNode)
? ? ? ? ?this.appendChild(txtNode);
? ? ? ?if(retNode)
? ? ? ? ?this.appendChild(retNode);
? ? ?}
? ?}
?);
?HTMLElement.prototype.__defineGetter__
?(
? ?"innerText",
? ?function ()
? ?{
? ? ?var anyString = "";
? ? ?var childS = this.childNodes;
? ? ?for(var i=0; i
? ? ? ?if(childS[i].nodeType==1)
? ? ? ? ?anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
? ? ? ?else if(childS[i].nodeType==3)
? ? ? ? ?anyString += childS[i].nodeValue;
? ? ?}
? ? ?return anyString;
? ?}
?);
?HTMLElement.prototype.__defineGetter__
?(
? ?"text",
? ?function ()
? ?{
? ? ?return this.innerText;
? ?}
?);
mozilla 不支持 element.customAttribute 的。
一定要用 setAttribute("customAttribute",value) , getAttribute("customAttribute")
(这个是最麻烦的地方)
我自己是写了这个全局函数来添加删除事件的:
function AttachDomEvent(obj,name,func)
{
if(obj.attachEvent)
?obj.attachEvent("on"+name,func);
if(obj.addEventListener)
?obj.addEventListener(name,func,true);
}
function DetachDomEvent(obj,name,func)
{
if(obj.detachEvent)
?obj.detachEvent("on"+name,func);
if(obj.removeEventListener)
?obj.removeEventListener(name,func,true);
}
例如
AttachDomEvent(window,"click",handle_click);
有时候mozilla不认某写元素的id,如果你不想用getElementById,那么可以在后加这一段代码:
if(document.addEventListener)
{
var tagcoll=document.getElementsByTagName("*");
for(var i=0;i
?if(tagcoll[i].id)
?{
? eval("var "+tagcoll[i].id+"=document.getElementById('"+tagcoll[i].id+"')");
?}
}
}
不过这段代码与 iframe/frame 的有冲突的地方。
我平时用到的比较常见的问题是
table.insertRow(-1);
row.insertCell(-1);
事件方面还有一点非常有用的,的就是事件的重定向
IE5.5+用obj.fireEvent(eventName, eventObj)
ns下用obj.dispatchEvent(eventObj);
事实上事件重定向的频繁使用是会使浏览器崩溃的特别在ns下,避免这样可以自己模拟事件的重定向和触发,有兴趣的去看看bindows的application.js中的核心代码,设计思想还是比较简单的
发表评论
- 浏览: 122086 次
- 性别:

- 来自: bj

- 详细资料
搜索本博客
最近加入圈子
最新评论
-
[转]JSP语法的xml写法
...
-- by stonesfour -
【转】Java中的位运算符
太好了,谢谢楼主分享!
-- by qhncxf -
setTimeout和setInterval ...
setTimeout(function(parameter){return fu ...
-- by letle -
setTimeout和setInterval ...
其实你上面的用法是不规范的,用setTimeout或setInterval的时候 ...
-- by sheay -
html的DOCTYPE 问题
你
-- by zhengbin917943






评论排行榜