写能运行在IE和Firefox上的脚本

于 2008-10-08 13:21:00 发布
阅读量733 收藏
点赞数
分类专栏： web2 文章标签： firefox ie xmlhttprequest object div function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/metas_wzh/article/details/3033053
版权

  1.1.       HTML

1.1.1.          DOM structure

body

description

In IE, body object does exist after the body tag is parsed.

And In Firefox, the body object already exists before parsed.

IE example

<body>

</body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

Firefox example

<body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

</body>

 

Should-be

<body>

</body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

 

outerHTML

description

Sets or retrieves the object and its content in HTML.

In Firefox HTML element has no this property.

IE example

var htmlStr = obj.outerHTML;

Firefox example

 

Should-be

We should not use outerHTML.

 

 

document.formName.elements[]

description

Get an element from form object.

But “document.formName.item“ cannot work in Firefox.

IE example

1,document.formName.item("itemName")

2, document.formName.elements["elementName"];

Firefox example

document.formName.elements["elementName"];

Should-be

document.formName.elements["elementName"];

 

node.parentElement

description

Get the parent element of “node”

IE example

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentElement;

var pe2 = inp1.parentNode;

Firefox example

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentNode;

Should-be

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentNode;

 

node.children[]

description

Get one child of the parent element named of “node”

IE example

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch = node.children(0);

var ch2 = node.children[0];

var ch3 = node.childNodes[0];

Firefox example

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch3 = node.childNodes[0];

Should-be

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch3 = node.childNodes[0];

 

window.location.href

description

Sets or retrieves the location of the window.

IE example

<iframe name=’frm1’ src=’http://www.skcc.com’/>

1,window.frm1.location.href=’http://www.sktelecom.com’;

2, window.frm1.location=’http://www.sktelecom.com’;

Firefox example

<iframe name=’frm1’ src=’http://www.skcc.com’/>

window.frm1.location =’http://www.sktelecom.com’;

Should-be

<iframe name=’frm1’ src=’http://www.skcc.com’/>

window.frm1.location =’http://www.sktelecom.com’;

 

element.innerText

description

Sets or retrieves the text between the start and end tags of the object.

It does not work in Firefox.

IE example

<div id=’div1’>abc</div>

var tx = div1.innerText;

Firefox example

<div id=’div1’>abc</div>

var tx = div1. textContent;

Should-be

<div id=’div1’>abc</div>

var tx = div1.innerText || div1. textContent;

 

 

 

inputObj.type

description

Retrieves the type of an input object.

In Firefox, it is a writable property.

IE example

<body>

<form name='form1'>

 <input name='in1' type='text' value='111'>

</form>

</body>

alert(form1.in1.type);

Firefox example

<body>

<form name='form1'>

 <input name='in1' type='text' value='111'>

</form>

</body>

form1.in1.type=’hidden’;

alert(form1.in1.type);

Should-be

We could use it readonly.

 

 

1.1.2.          Event

 

window.event

description

“window.event” can only work in IE but not Firefox, because  the event in Firefox can only work when the event occurs.

IE example

<input type=’button’ onclick = ‘doClick()’>

function doClick(){

  var obj =  window.event.srcElement;

var code = window.event.keyCode;

var pX = event.x;

var pY = event.y;

}

Firefox example

<input type=’button’ onclick = ‘doClick(event)’>

function doClick(event){

var obj =  event.target;

var code = event.which;

var pX = event.pageX;

var pY = event.pageY;

}

Should-be

<input type=’button’ onclick = ‘doClick(event)’>

function doClick(event){

  var obj =  event.srcElement? event.srcElement : event.target;

var code = event.keyCode? event.keyCode : event.which;

var pX = event.x?event.x : event.pageX;

var pY = event.y?event.y : event.pageY;

}

 

 

window.showModalDialog

&

window. showModelessDialog

description

showModalDialog : Creates a modal dialog box that displays the specified HTML document.

showModelessDialog : Creates a modeless dialog box that displays the specified HTML document.

They do not work in Firefox.

You should use open method to replace them.

IE example

function fnOpenModal(){

   var sFeatures=’dialogHeight:400px;dialogWidth:300px;’;

   window.showModalDialog("showModalDialog_target.htm", "",

      sFeatures)

}

function fnOpenModeless(){

   var sFeatures=’dialogHeight:400px;dialogWidth:300px;’;

   window.showModelessDialog("showModalDialog_target.htm", "",

      sFeatures)

}

 

In dialog window:
function doSubmit(){

window.returnValue=[];

window.returnValue[0] = value;

window.returnValue[1] = title;

window.top.close();

}

Firefox example

window.open("Sample.htm",null,    "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

 

in opened window:

function doSubmit(){

var pWin = window.opener;

pWin.form1.title.value = ’title’;

pWin.form1.val.value = ’value’;

pWin.top.close();

}

Should-be

You should use open instead of showModalDialog method.

 

1.1.3.          CSS

!important

description

In Firefox, it considers it a higher priority CSS constrain while there are some other some definitions.

IE will ignore the CSS syntax while Firefox not.

IE example

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

The real width will be 120px because “!important” does not work.

Firefox example

<style>

.myWidth{

/*width:115px !important;*/

width:120px;padding:5px;

}

</style>

The real width will be 125px.

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

The real width will be 120px.

“!important” does work.

Should-be

Notice: The definition with “!important” must be placed before others.

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

 

 

ul

description

“padding” ‘s default value is different in ul.

IE example

“padding-left” ‘s value is 0px.

Firefox example

“padding-left” ‘s value is 40px.

Should-be

Set “ul” to “ul{margin:0;padding:0;}” ;

 

ol

description

“padding” ‘s default value is different in ul.

IE example

“padding-left” ‘s value is 0px.

Firefox example

“padding-left” ‘s value is 40px.

Should-be

Set “ol” to “ol{margin:0;padding:0;}” ;

 

 

 

blank

description

Blank ‘s site is different .

IE example

Blank ‘s site is 8px.

Firefox example

Blank ‘s site is 4px.

Should-be

Use other format tag instead of blank.

 

 

margin

description

“margin” ‘s value is different  when “div ” is set “float”.

IE example

“margin” ‘s value is setting value ‘s 2 times .This is a bug.

Firefox example

“margin” ‘s value is right.

Should-be

Add “display:inline;” to div.

 

Div ‘s format

description

Div ‘s format is different .

IE example

It is center format when set “margin-left, margin-right” to “auto”.

Firefox example

It is center format when set “text-align:center”.

Should-be

set “margin-left, margin-right” to “auto” and set “text-align:center”.

 

 

 

 

Link’s back color

description

Setting link’s back color is different .

IE example

Set link’s back color directly.

Firefox example

Set link’s back color and modify other attribute.

Should-be

It must add “display: block”.

 

Link’s border

description

Setting link’s border is different .

IE example

Set link’s border directly.

Firefox example

Set link’s border and modify other attribute.

Should-be

It must add “display: block”.

 

Link’s format

description

Link’s format is different .

IE example

Link’s format doesn’t change line.

Firefox example

Link’s format may change line.

Should-be

It must add “float: left”.

 

 

 

BOX model

description

BOX Model ‘s site is different.

IE example

BOX Model ‘s site is 30px.

Firefox example

BOX Model ‘s site is 28px.

Should-be

Add “div{margin:30px!important;margin:28px;}”  to div

 

 

opacity

description

Set opacity for element.

IE example

filter:alpha(opacity=10); /* IE */

Firefox example

-moz-opacity:0.5;  /*Moz + FF */

Should-be

<style>

.trans{

filter:alpha(opacity=10); /* IE */

-moz-opacity:0.5;  /*Moz + FF */

opacity: 0.5;  /* CSS3 browser（FF 1.5 and above）*/  

}

</style>

 

 

radius

description

radius is different.

IE example

It can’t support radius.

Firefox example

It can support radius.

Should-be

Don’t use radius in css.

 

 

 

Line ‘s border

description

Line’s border is different when this line is double.

IE example

Its setting is “border:2px outset;”.

Firefox example

Its setting is “-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040 #808080;-”.

Should-be

Add “border:2px outset;” and “-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040 #808080;-”  to css.

 

 

cursor:hand

description

cursor:hande does not work in Firefox.

IE example

It can support hand .

Firefox example

It can’t support hand.

Should-be

Use pointer instead of hand.

 

CSS expression

description

IE will parse the expression written in CSS.

IE example

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Display different background color very hour.

Firefox example

It does not work.

Should-be

We should not use CSS expression.

 

1.2.       JS compatibility

colletction class object

description

At IE, can get collection class object by using “()” or “[]”. While at firefox, only “[]” works

IE example

document.forms("formName") or document.forms["formName"]

Firefox example

document.forms["formName"]

Should-be

document.forms["formName"]

 

Self-defined Attribute

description

At IE, can get self-defined attribute by using “.attributeName” or “getAttribute()”  method. While at firefox, only “getAttribute()” method works

IE example

formName.attributeName or formName.getAttribute()

Firefox example

 formName.getAttribute()

Should-be

 formName.getAtrribute()

 

eval(“idName”)

description

At IE, can get html object by using “eval(“idName”)” or “getElementById(“idName”)”, while at firefox, only “getElementById(“idName”)” works

IE example

eval(“idName”) or getElementById(“idName”)

Firefox example

 getElementById(“idName”)

Should-be

 getElementById(“idName”)

 

Variable name is identical to html object name

description

At IE, html object’s id can be used directly as variable name of document’s object, while firefox doesn’t support this.

At firefox, variable name can be identical to html object’s id, while at IE, it’s forbidden.

IE example

document.idName or document.getElementById("idName")

Firefox example

document.getElementById("idName")

Should-be

1)    Replace document.idName with document.getElementById("idName"),

2)    Do not use the same variable name as html object id

3)    When declare variable, add “var” before variable name.

 

 

 const

description

At firefox, can define constant with “const” or “var” keyword, while at IE, only “var” works

IE example

var constName

Firefox example

var constName or const constName

Should-be

 Var constName

 

Access frame object

description

At IE, can use both “window.frameId” and “window.frameName” to access frame object, while at firefox, only “window.frameName” works

IE example

 window.frameId, window.frameName

Firefox example

 window.frameName

Should-be

window.frameName

 

 

1.3.       Compatibility of ActiveX and etc

ActiveX Object

description

Browse Object  is  different  when  create  it.

IE example

Msxml2.XMLHTTP object:
var objRequest=new ActiveXObject("Msxml2.XMLHTTP");}

Firefox example

XMLHttpRequest:

var objRequest=new XMLHttpRequest();

Should-be

try
{//MS IE
objRequest=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{
  try
  {
    objRequest=new ActiveXObject("Microsoft.XMLHTTP");

} catch(oc){

objRequest=null;

}

}//other browsers
if(!objRequest&&typeof XMLHttpRequest!="undefined")
{

objRequest=new XMLHttpRequest();

}

 

 

 

metas_wzh
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值