logo标签列表

制作/寻找HTML5验证器书签小工具

javascripthtmlbookmarkletvalidationw3c-validation
5
我希望找到或创建一个书签工具，可以使用W3C HTML 5验证器验证当前查看页面的HTML内容。我已经找到了两个书签工具，并尝试将它们结合起来，但不确定如何操作。
Chris Coyier有一个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/check后，我创建了以下函数，它会提交重要的键值对：

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();
})();

书签脚本

将前面的两个代码块复制到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()})();
1
@Damon 如果你想自动检测文档类型，请使用 "Inline" 而不是 "HTML5"。 - Rob W
我发现某些页面出现了“抱歉！无法检查此文档。”的错误，例如：http://www.designswan.com/。通常在长时间加载后会出现这种情况。您有什么想法是什么原因导致的吗？ - Damon
1
@Damon，目前我在Chrome和Firefox中没有看到任何错误。我猜想您是在服务器过载时尝试使用服务的。值得一提的是：请记住渲染的HTML是经过验证的。如果缺少结束标签/属性，则浏览器会自动添加。如果页面完全静态，最好的选择可能是验证URL（或者使用XHR获取原始数据，用于本地页面）。 - Rob W
@Damon 这些错误与 Web 服务无关。按照我的答案中的步骤，您可以使用 http://validator.nu/。不相关的提示：上一篇帖子中的 XHR 建议与您收到的错误无关。我只是提到它，让您意识到呈现的 HTML 不一定等于下载的页面。 - Rob W
啊..我真的无法想象为什么它会尝试连接到本地主机，而不是本地站点.. - Damon
显示剩余3条评论
1
之前的答案对我没用。我正在使用“检查当前页面序列化DOM”书签，网址是https://validator.w3.org/nu/about.html。这似乎非常有效，可以捕捉到动态生成的HTML。
1
我也遇到了“抱歉！无法检查此文档。”的错误，通过在表单属性中添加accept-charset“utf-8”来解决它。
在创建表单元素的函数中添加以下行：form.acceptCharset =“utf-8”;
对我有用。
1

Marta的回答帮了我很多。这是更新后的书签。

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()})();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接