Вопрос по javascript, html5, validation – Создание / поиск html5 валидатора bookmarklet

5

Я хочу найти или создать букмарклет, который будет проверять HTML-содержимое просматриваемой в данный момент страницы с помощью валидатора W3C HTML 5.

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

Криса Койера есть HTML5 проверочный букмарклет это хорошо работает, за исключением того, что использует URI страницы, поэтому не работает для локально протестированных сайтов:

javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();

Я также нашел этот, который работает, захватывая html текущей страницы, но я не могу понять, как заставить его делать html5 ... в коде есть ссылка на doctype, и я попытался изменить это на html5 , html500 и т. д. и полностью удалив его, надеясь, что он будет автоматически обнаружен ... но безрезультатно:

javascript:(function(){var h=document;var b=h.doctype;var e="<!DOCTYPE "+b.name.toLowerCase()+' PUBLIC "'+b.publicId+'" "'+b.systemId+'">\n';var g=h.documentElement.outerHTML;var f="http://validator.w3.org/check";var i={prefill_doctype:"html401",prefill:0,doctype:"inline",group:0,ss:1,st:1,outline:1,verbose:1,fragment:e+g};var a=h.createElement("form");a.setAttribute("method","post");a.setAttribute("target","_blank");a.setAttribute("action",f);for(var j in i){var c=h.createElement("input");c.setAttribute("type","hidden");c.setAttribute("name",j);c.setAttribute("value",i[j]);a.appendChild(c)}if(navigator.appCodeName=="Mozilla"){h.body.appendChild(a)}a.submit()})();

Ваш Ответ

4   ответа
11

вам нужна точная копия документа HTML (включая Doctype и т. Д.). Для этогоЯ написа следующая функция:

function DOMtoString(document_root) {
    var html = '',
        node = document_root.firstChild;
    while (node) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                html += node.outerHTML;
            break;
            case Node.TEXT_NODE:
                html += node.nodeValue;
            break;
            case Node.CDATA_SECTION_NODE:
                html += '<![CDATA[' + node.nodeValue + ']]>';
            break;
            case Node.COMMENT_NODE:
                html += '<!--' + node.nodeValue + '-->';
            break;
            case Node.DOCUMENT_TYPE_NODE:
                // (X)HTML documents are identified by public identifiers
                html += "<!DOCTYPE "
                     + node.name
                     + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
                     + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
                     + (node.systemId ? ' "' + node.systemId + '"' : '')
                     + '>\n';
            break;
        }
        node = node.nextSibling;
    }
    return html;
}

Затем необходимо создать и отправить форму. После проверки отправки формы наhttp: //validator.w3.org/chec, Я создал следующую функцию, которая передает значимые пары ключ-значение:

javascript:(function() {
    var html_to_validate = DOMtoString(document);

    /* Paste the DOMtoString function here */

    function append(key, value) {
        var input = document.createElement('textarea');
        input.name = key;
        input.value = value;
        form.appendChild(input);
    }
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = 'http://validator.w3.org/check';
    form.enctype = 'multipart/form-data';         // Required for this validator
    form.target = '_blank';                       // Open in new tab
    append('fragment', html_to_validate);         // <-- Code to validate
    append('doctype', 'HTML5');                   // Validate as HTML 5
    append('group', '0');
    document.body.appendChild(form);
    form.submit();
})();
Bookmarklet

Скопируйте два предыдущих блока в Закрывающий компилятор Google. Не забудьте поставить префиксjavascript: опять таки

javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
Спасибо! Специально для объяснения того, как ты это сделал. Очень полезный. Я могу посмотреть, можно ли сделать это для автоматического определения типа документа Damon
@ Damon Если вы хотите автоматически определять тип документа, используйте"Inline" вместо того"HTML5". Rob W
xhr? звучит интригующе. Я получаю некоторые странные ошибки ... например, "500 Не удается подключиться к localhost: 8888 (подключение: соединение отклонено)" на нелокальных веб-сайтах (frex: www.milliontrees.ca) Damon
Я обнаружил, что на некоторых страницах отображается сообщение «Извините! Этот документ не может быть проверен. ошибка. например: Designswan.com. Это обычно происходит после долгого времени загрузки. Есть идеи, что может быть причиной этого? Damon
@ Damon В настоящее время я не вижу ошибок в Chrome и Firefox. Я предполагаю, что вы пытались использовать сервис, когда он был перегружен. Примечание: имейте в виду, что визуализированный HTML проверен. Отсутствующие закрывающие теги / атрибуты автоматически добавляются браузером. Если страница полностью статична, возможно, лучше проверить URL-адрес (или использовать XHR для извлечения необработанных данных для локальных страниц). Rob W
1

а, устранена путем добавления accept-charset "utf-8" к атрибутам формы.

В функцию, которая создает элемент формы, добавьте следующую строку: form.acceptCharset = "utf-8";

Это сработало для меня.

1

твет Марты помог мне. Вот обновленный букмарклет.

javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
1

Проверить сериализованный DOM текущей страницы" наhttps: //validator.w3.org/nu/about.htm. Кажется, это прекрасно работает, собирая динамически генерируемый HTML.

Похожие вопросы