新浦京81707con > 功能介绍 > 亲测兼容Firefox与IE,的不兼容问题解决方法小结

原标题:亲测兼容Firefox与IE,的不兼容问题解决方法小结

浏览次数:159 时间:2019-09-13

HTML成分,属性已经特别丰裕了。可是,在少数场所下,也会显示衣衫褴褛,那时候自定义属性就表明了老大注重的效率。

1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。

Html成分的自定义属性,使用起来,十分便于,举个例子:

复制代码 代码如下:

<input type=”button” value=”Click Me, Baby!” />

if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="<" this.tagName.toLowerCase();
for (var i=0;i<attrs.length;i ) {
attr=attrs[i]新葡京真人赌场,;
if(attr.specified)
str =" " attr.name '="' attr.value '"';
}
if(!this.canHaveChildren)
return str ">";
return str ">" this.innerHTML "</" this.tagName.toLowerCase() ">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}

若果大家先天亟待限制,这么些按键,只好点击2次,然后就失效了。

2.群集类对象难题
证实:IE下,能够行使()或[]赢得集结类对象;Firefox下,只可以选拔[]获得集结类对象.
化解方法:统一使用[]获取群集类对象.
3.自定义属性难点
注脚:IE下,能够运用获取常规属性的法子来收获自定义属性,也足以行使getAttribute()获取自定义属性;Firefox下,只可以选取getAttribute()获取自定义属性.
消除措施:统一通过getAttribute()获取自定义属性.

万般的贯彻格局,是足以选拔全局变量的样式来记录点击次数,但我们这里用自定义属性来贯彻这几个效果,体现一下自定义属性的优势;大家对地方的button做一下改变:

4.eval("idName")问题
表达:IE下,,可以使用eval("idName")或getElementById("idName")来博取id为idName的HTML对象;Firefox下只能利用getElementById("idName")来收获id为idName的HTML对象.
赶尽杀绝措施:统一用getElementById("idName")来赢得id为idName的HTML对象.
5.变量名与某HTML对象ID一样的标题
证实:IE下,HTML对象的ID可以用作document的下面前遭受象变量名直接选拔;Firefox下则不能够.Firefox下,能够选取与HTML对象ID一样的变量名;IE下则不能够。
化解方法:使用document.getElementById("idName")代替document.idName.最棒永不取HTML对象ID一样的变量名,以减小不当;在宣称变量时,一律加上var,以幸免歧义.
6.const问题
表达:Firefox下,能够选择const关键字或var关键字来定义常量;IE下,只好选取var关键字来定义常量.
减轻形式:统一行使var关键字来定义常量.
7.input.type属性难题
注脚:IE下input.type属性为只读;可是Firefox下input.type属性为读写.
8.window.event问题
注明:window.event只好在IE下运维,而不能在Firefox下运营,那是因为Firefox的event只好在事变时有发生的现场使用.
解决方法:
IE:

<input type=”button” value=”Click Me, Baby!” clickCount=”0” />

复制代码 代码如下:

能够看来,我为这些button 增添了一个自定义属性 clickCount, 并将早先值设为 0;上面大家来写完毕效果与利益的js代码:

<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>

1. 给 button 扩大click事件的拍卖

IE&Firefox:

<input type=”button” value=”Click Me, Baby!” clickCount=”0”  onclick=”customAttributeDemo(this);" />

复制代码 代码如下:

2. 大家来写 customAttribute德姆o(obj) 那些函数

<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>

对此IE来说,使用自定义属性特别轻便,因为IE自动将自定义属性分析到了DOM中,和职业属性没有另外差距,IE下的本子:

9.event.x与event.y问题
表达:IE下,even对象有x,y属性,可是从未pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是尚未x,y属性.
竭泽而渔措施:使用mX(mX = event.x ? event.x : event.pageX;)来替代IE下的event.x可能Firefox下的event.pageX.

复制代码 代码如下:

10.event.srcElement问题
表达:IE下,even对象有srcElement属性,但是从未target属性;Firefox下,even对象有target属性,不过尚未srcElement属性.
焚薮而田办法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来取代IE下的event.srcElement或然Firefox下的event.target.
11.window.location.href问题
申明:IE或许Firefox2.0.x下,能够选拔window.location或window.location.href;Firefox1.5.x下,只好使用window.location.
解决措施:使用window.location来顶替window.location.href.
12.模态和非模态窗口难点
注解:IE下,能够由此showModalDialog和showModelessDialog展开模态和非模态窗口;Firefox下则不能够.
缓和格局:直接利用window.open(pageULacrosseL,name,parameters)格局张开新窗口。
假设供给将子窗口中的参数字传送递回父窗口,能够在子窗口中使用window.opener来访谈父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以上边包车型的士frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId只怕window.frameName来访谈那个frame对象.
Firefox:只可以接纳window.frameName来访问那一个frame对象.
其余,在IE和Firefox中都能够利用window.document.getElementById("frameId")来探望那一个frame对象.
(2)切换frame内容:
在IE和Firefox中都能够动用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
只要要求将frame中的参数字传送回父窗口,能够在frme中接纳parent来拜见父窗口。比如:parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签未有被浏览器完全读入此前就存在;而IE的body则必得在body标签被浏览器完全读入之后才存在.
例如:
Firefox:

function customAttributeDemo(obj)
{
    if (obj.clickCount === '0')
    {
        obj.clickCount = '1';
    }
    else
    {
        obj.disabled = true;
    }
}

复制代码 代码如下:

地点的代码在 FireFox下将失效,因为FireFox对自定义属性的应用,限制越来越高,只好接纳attributes[] 集结来访谈,Fire福克斯 下的代码:

<body >
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>

复制代码 代码如下:

IE&Firefox:

function customAttributeDemo(obj)
{
    if (obj.attributes['clickCount'].nodeValue === '0')
    {
        obj.attributes['clickCount'].nodeValue = '1';
    }
    else
    {
       obj.disabled = true;
    }
}

复制代码 代码如下:

上边的代码,也适用于IE,所以,这几个代码,正是具备包容性的代码了。

<body >
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>

本文由新浦京81707con发布于功能介绍,转载请注明出处:亲测兼容Firefox与IE,的不兼容问题解决方法小结

关键词: 新浦京81707con

上一篇:百度留言本js,实例代码

下一篇:没有了