各种 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 等库的核心优势之一。

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

Answer 2

首先将“all”和“eval”的用法替换为 document.getElementById。

所有浏览器都支持广泛的调试工具（例如 Firefox 的 FireBug） - 使用它们来查看失败的原因。