Кросс-браузерная совместимость с различными элементами javascript - PullRequest
Новая
       40

Кросс-браузерная совместимость с различными элементами javascript

0 голосов
/ 21 декабря 2011

Я работаю над приложением, чтобы сделать его совместимым с браузером. У меня есть страница 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.DataSrc 2.Datafld, а также IMG datafld.

Есть ли альтернатива вышеуказанным элементам с браузерами или как могут быть сделаны изменения в коде, чтобыЭто браузер Compatbile. Пожалуйста, помогите, а также это будет шаблон для кросс-браузерного тестирования ... Большое спасибо

Ответы [ 2 ]

2 голосов
/ 21 декабря 2011

Кросс-браузерная совместимость является одним из основных преимуществ использования библиотеки, такой как jQuery , MooTools и т. Д.

Я бы порекомендовал один из них, если ваша цель - кросс-браузерная совместимость - так как над этими проектами работают целые команды.

0 голосов
/ 21 декабря 2011

Начните с замены использования «all» и «eval» на document.getElementById.

Все браузеры поддерживают расширенные средства отладки (например, FireBug for Firefox) - используйте их, чтобы увидеть, что не работает.

...