javascript - 各种 javascript 元素的跨浏览器兼容性

Question

我正在开发应用程序以使其与浏览器兼容。我有一个 jsp 页面，它将调用 Javascript 函数来执行。基本上，我在页面中显示内容列表，以便使用单选按钮进行选择。就这样:

JSP 页面:

 <script language="JavaScript">
        loadcodes(10,'codesTable','#TheCodes',' ' ,'desc','<%=compositeDescTagName%>','<%=compositeDescFormName%>','<%=codeFormName%>','<%=codeIdFormName%>','document.resourceform.<%=Globals.ENFORCE_COMMENTS%>');
    </script>.

上面的函数会引用下面的js页面:

function loadcodes(depth,tableId,dataSrc,onclickfunc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    document.writeln("<TABLE height=100% id=PrimaryTable dataSrc='" + dataSrc + "' cellSpacing=0 cellPadding=0 border=0> <TBODY>");
    writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
    document.writeln("</TBODY></TABLE>");
}

function writeNode(depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
    if (depth <= 0)
        return;
    document.writeln("<TR onclick=\"toggle(this,'" + dataSrc + "','" + compositeDescTagName + "','" + compositeDescFormName + "','" + codeFormName + "','" + codeIdFormName + "','" + enforceCommentsFormName + "')\" class=tree_indent>");
        document.writeln("<TD><IMG dataFld='image' id=Icon class=tree_node>");
    document.writeln("<SPAN dataFld=" + descFld + " class=formtext></SPAN>");
    document.writeln("<SPAN dataFld=haschildren id=HasChildren style='DISPLAY:none'></SPAN><SPAN dataFld=isleaf id=isleaf style='DISPLAY: none'></SPAN><SPAN dataFld=composite_desc id=composite_desc style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_code id=composite_code style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=composite_id id=composite_id style='DISPLAY:none'></SPAN>");
    document.writeln("<SPAN dataFld=comments_required id=comments_required style='DISPLAY:none'></SPAN>");
    document.writeln("</TD></TR>");
    document.writeln("<TR style='DISPLAY: none' class=tree_indent>");
        document.writeln("<TD><!-- next level -->");
        document.writeln("<TABLE class=tree_node id=node dataFld=node valign=top border=0 cellSpacing=1 cellPadding=1 >");
        document.writeln("<TBODY>");
    writeNode(--depth,dataSrc,descFld,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName);
        document.writeln("</TBODY>");
        document.writeln("</TABLE>");
        document.writeln("</TD>");
        document.writeln("</TR>");
}

var selectedCode;
function toggle(e,dataSrc,compositeDescTagName,compositeDescFormName,codeFormName,codeIdFormName,enforceCommentsFormName)
{
  var nextRow;
  var nextRow1;

  nextRow = e.nextSibling;

  hc = e.all.HasChildren;
  var isleaf = e.all.isleaf;

    if (nextRow.style.display == "none" && isleaf.innerText == "false")
    {
        nextRow.style.display = "";
        e.all.Icon.src = "/edcs/images/minus.gif";

        if (nextRow.all && nextRow.all[2] && !nextRow.all[2].dataSrc) 
        {
            nextRow.all[2].dataSrc = dataSrc;
        }
    } 
    else if (isleaf.innerText == "true")
    {
        // reset the bullet on the one already selected
        if (selectedCode && selectedCode.all && selectedCode.all.Icon)
            selectedCode.all.Icon.src = "/edcs/images/bullet.gif";

        e.all.Icon.src = "/edcs/images/right.gif";

        re=/'/g;

        var str = e.all.composite_desc.innerText.replace(re,"\\'");

        eval(compositeDescTagName + ".innerText = '"  + str + "'");
        eval(compositeDescFormName + ".value = '"  + str + "'");
        eval(codeFormName + ".value = '"  + e.all.composite_code.innerText + "'");
        eval(codeIdFormName + ".value = '"  + e.all.composite_id.innerText + "'");
        commentsEnforced = eval(enforceCommentsFormName + ".value");
        if (commentsEnforced == "false")
            eval(enforceCommentsFormName + ".value = '"  + e.all.comments_required.innerText + "'");

        selectedCode = e;
    }
    else
    {
        nextRow.style.display = "none";
        e.all.Icon.src = "/edcs/images/plus.gif";
    }
}

此流程在 IE 浏览器中运行良好，但其他浏览器不支持。在搜索时我发现了仅 IE 支持的元素列表:

1. 数据源
2. Datafld 以及 IMG datafld。

浏览器是否可以替代上述元素，或者如何修改代码以使其与浏览器兼容？请提供帮助，它将成为跨浏览器测试的模板。

Answer 1

跨浏览器兼容性是使用 jQuery 等库的核心优势之一, MooTools等

如果跨浏览器兼容性是您的目标，我会推荐其中之一 - 因为整个团队都在致力于这些项目。