Introduction
The purpose of this white paper is to compare the
compatibility between Internet Explorer 6.0 and Mozilla Firefox 1.5 with
reference to programming consideration so as the web application will be
compatible with both the browser.
Overview
In Firefox, JavaScript DOM is not properly implemented and has its flaws.
Case 1: Square
brackets are preferable while using arrays.
Internet Explorer
|
Ø
alert(arr(2));
|
Compatible with
Internet Explorer and Firefox
|
Ø
alert(arr[2]);
|
Case 2: getElementById for IE works for name as well as id attributes. For FF, it works only for id attribute.
Internet Explorer
|
Ø timeData.innerHTML = "<select
name=rt"></select>";
|
Compatible with
Internet Explorer and Firefox
|
Ø timeData.innerHTML = "<select name=rt id=rt"></select>";
|
Case 3: While creating HTML elements using DOM, we should not use its HTML code to create it.
Internet Explorer
|
Ø var opt = document.createElement(“<option value=\"Firefox
Browser\">”);
|
Compatible with
Internet Explorer and Firefox
|
Ø var opt = document.createElement(“option”);
Ø opt.value=”Firefox Browser”;
|
Case 4: While creating HTML elements using DOM, we should not use its HTML code to create it.
Internet Explorer
|
Ø var docLink = document.createElement("<a>");
|
Compatible with
Internet Explorer and Firefox
|
Ø var docLink = document.createElement("a");
|
Case 5: While creating HTML elements using DOM, we should not use its HTML code to create it.
Internet Explorer
|
Ø var grpTab = document.createElement("<table
cellspacing=0 cellpadding=3 width=98% bordercolor=gray
align=center>");
Ø grpTab.className = "tab";
Ø <style>
.tab
{
border-left: thin solid;
border-right: thin solid;
border-top: thin solid;
border-bottom: thin solid;
}
</style>
|
Compatible with
Internet Explorer and Firefox
|
Ø var grpTab = document.createElement(“table”);
Ø grpTab.style.width="98%";
Ø grpTab.setAttribute("align",
"center");
Ø grpTab.className = "tab";
Ø <style>
.tab
{
border-left: thin solid;
border-right: thin solid;
border-top: thin solid;
border-bottom: thin solid;
border: 1px solid gray;
border-collapse: collapse; <!-- cellspacing -->
padding: 3px;
}
</style>
|
Case 6: While creating HTML elements using DOM, we should not use its HTML code to create it.
Internet Explorer
|
Ø var msgRow = document.createElement("<tr
style=\"height:18px;font-family:verdana;font-size:12px;color:blue\">");
|
Compatible with
Internet Explorer and Firefox
|
Ø var msgRow = document.createElement("tr”);
Ø msgRow.className = "tabrowStyle";
<style>
.tab rowStyle
{
height: 18px;
font-family: verdana;
font-size: 12px;
color: blue;
}
</style>
|
Case 7: While creating HTML elements using DOM, we should not use its HTML code to create it.
Internet Explorer
|
Ø remChoice.innerHTML = "<input
type=checkbox name=\"orgrem\" value=\"1\">";
Ø remChoice.setAttribute("disabled","true");
|
Compatible with
Internet Explorer and Firefox
|
Ø var chk =
document.createElement("input");
Ø chk.setAttribute("type",
"checkbox");
Ø chk.setAttribute("name", "
orgrem");
Ø chk.setAttribute("value",
"1");
Ø remChoice.appendChild(chk);
Ø chk.setAttribute("disabled",
"true");
|
Case 8: .innerText attribute is not working in Firefox
Internet Explorer
|
Ø
.innerText
|
Compatible with
Internet Explorer and Firefox
|
Ø
.innerHTML.replace(/\</g,"<").replace(/\>/g,">")
|
Case 9: window.event is not working in Firefox.
Internet Explorer
|
Ø
<input type="text"
name="txt1" onKeyPress="SearchName(this, selList)"
value="<Type To Search>"
onClick="javascript:this.value='';">
Ø
function SearchName(txtObj, selObj)
{
keyPressed = window.event.keyCode;
}
|
Compatible with
Internet Explorer and Firefox
|
Ø
<input type="text"
name="txt1" onKeyPress="SearchName(this, selList, event)"
value="<Type To Search>" onClick="javascript:this.value='';">
Ø
function SearchName(txtObj, selObj, e)
{
if(window.event)
keyPressed
= window.event.keyCode; // IE
else
keyPressed
= e.which; // Firefox
}
|
Case 10: removeNode( ) is not working in Firefox
Internet Explorer
|
Ø
frm.comp.removeNode(true);
|
Compatible with
Internet Explorer and Firefox
|
Ø
var temps = frm.comp;
Ø
temps.parentNode.removeChild(temps);
|
Case 11: insertBefore(
) is not working in Firefox.
Internet Explorer
|
Ø
document.frm.insertBefore(tab);
|
Compatible with
Internet Explorer and Firefox
|
Ø
document.frm.appendChild(tab);
|
Internet Explorer
|
Ø
retval =
window.showModalDialog("attach.html",txtData);
|
Compatible with
Internet Explorer and Firefox
|
Ø if(window.showModalDialog) // IE
{
retval =
window.showModalDialog("attach.html",txtData);
}
else // Firefox
{
retval = window.open("attach.html",
txtData,
"left=100,top=100,width=550,height=300,dependent,modal");
window.onfocus=function()
{
if(retval
&& !retval.closed)
retval.focus();
}
return
false;
}
Ø The problem with this code is
that window.open is asynchronous -- it does not block the
JavaScript execution until the window has finished loading. Therefore, you
may execute the line after the window.open line before the new window
has finished. You can deal with this
by having an onload handler in the new window and then call back into
the opener window (using window.opener).
|
