Как отправить созданный пользователем HTML-код в валидатор W3C для автоматической проверки без междоменных ошибок?

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

У меня есть кнопка в jQuery, которая пытается загрузить область текстового поля в валидатор W3C:

$('#inspecthtml').on('click', function() {
             var storyhtml = $('#story').text();
             validatorurl= "http://validator.w3.org/#validate_by_input";
             var newWin = open(validatorurl,'Validator','height=600,width=600');
             newWin.onload = function() {
                 newWin.document.getElementById("fragment").value=storyhtml;
             }           
    });

Я получаю сообщение об ошибке в консоли (используя Chrome):

Небезопасная попытка JavaScript получить доступ к кадру с URL-адресом http://api.flattr.com/button/view/?url=http%3A%2F%2Fvalidator.w3.org%2F&title=View%20W3C-Validator%20on%20flattr.com& из фрейма с URL-адресом http://validator.w3.org/#validate_by_input . Фрейм, к которому осуществляется доступ, установил для «document.domain» значение «flattr.com», а для фрейма, запрашивающего доступ, — нет. Оба должны установить «document.domain» в одно и то же значение, чтобы разрешить доступ.

Я приписываю это междоменной безопасности (см. Небезопасная попытка JavaScript получить доступ к кадру с URL)

Мой вопрос: есть ли способ отправить данные валидатору, чтобы мои пользователи могли проверить свою собственную разметку?


javascript html jquery cross-domain w3c-validation
person Sablefoste    schedule 01.01.2013    source источник
comment
Чем это лучше, чем просто ссылка на валидатор?   -  person Matti Virkkunen    schedule 02.01.2013
comment
Вы смотрели в jsonp?   -  person jchapa    schedule 02.01.2013
comment
@MattiVirkkunen, на один шаг меньше и меньше обучения пользователей. Если они видят зеленую линию, они знают, что это хорошо.   -  person Sablefoste    schedule 02.01.2013
comment
@jchapa, нет, можешь что-нибудь посоветовать?   -  person Sablefoste    schedule 02.01.2013
comment
@Sable: я бы побоялся позволять людям, которым нужно обучение, использовать валидатор W3C для написания любого кода в первую очередь.   -  person Matti Virkkunen    schedule 02.01.2013

Ответы (1)


arrow_upward
1
arrow_downward

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

Он написан с использованием $.ajax(…) jQuery с некоторыми DOMParser и document.write(…), чтобы поместить стилизованные результаты и пользовательский интерфейс W3C HTML Checker в новое окно так, как вам кажется.

var validator_baseurl= "https://validator.w3.org/nu/";
var validator_requesturl = validator_baseurl
    + "?showsource=yes&showoutline=yes";
$.ajax({
    url: validator_requesturl,
    type: "POST",
    crossDomain: true,
    data: storyhtml,
    contentType: "text/html;charset=utf-8",
    dataType: "html",
    success: function (response) {
        var results = (new DOMParser()).parseFromString(response, "text/html");
        results.querySelector("link[rel=stylesheet]").href
            = validator_baseurl + "style.css";
        results.querySelector("script").src
            = validator_baseurl + "script.js";
        results.querySelector("form").action
            = validator_requesturl;
        var newWin = window.open("about:blank",
            "Checker results", "height=825,width=700");
        newWin.document.open();
        newWin.document.write(results.documentElement.outerHTML);
        newWin.document.close();
        newWin.location.hash = "#textarea";
        setTimeout(function() {
            newWin.document.querySelector("textarea").rows = "5";
        }, 1000)
    }
});

Объяснение

  • вызывает отправку POST-запроса в W3C HTML Checker
  • делает текст storyhtml телом POST
  • делает text/html;charset=utf-8 типом носителя тела POST (что ожидает программа проверки)
  • заставляет программу проверки автоматически проверять содержимое storyhtml
  • показывает результаты проверки в новом окне сразу при первом открытии, за один шаг (так что вашим пользователям не нужно делать второй шаг, чтобы вручную отправить его для проверки)
  • заменяет относительные URL-адреса для внешнего интерфейса чекера CSS+JS на абсолютные URL-адреса (иначе в этом контексте «автономного окна» CSS не применялся бы, и скрипт не запускался)
  • newWin.location.hash = "#textarea" нужен, чтобы чекер показывал текстовое поле

Примечания

  • намеренно использует текущую проверку W3C HTML (а не устаревшую проверку разметки W3C)

  • намеренно отправляет содержимое для проверки как тело POST, а не multipart/form-data); чекер поддерживает multipart/form-data, но сделать его телом POST проще и лучше

  • бит setTimeout textarea не требуется; Я просто поместил его, чтобы результаты были видны без прокрутки (нижняя часть нового окна под текстовой областью); конечно можешь удалить если хочешь

  • устанавливает высоту и ширину нового окна немного больше, чем 600x600 в исходном коде вопроса; опять же, я просто сделал это, чтобы было легче увидеть; меняй их как хочешь

  • использует стандартные операции DOM, которые могут иметь лучшие методы/идиомы jQuery (я обычно не использую jQuery, поэтому я могу представить, что есть способы упростить код в нем дальше вокруг JQuery)

  • конечно, можно было бы обойтись и без использования jQuery — с помощью стандартного Fetch или XHR вместо этого (и я был бы рад также добавить сюда примеры, которые используют Fetch и XHR, если это необходимо)

  • протестировано и работает должным образом в Edge, Firefox, Chrome и Safari; но, как и в случае с любым кодом, использующим document.open, пользователям Safari необходимо отключить Настройки > Безопасность > Блокировать всплывающие окна

person sideshowbarker    schedule 13.09.2015
comment
Это выглядит как действительно хороший ответ и имеет смысл, и я дам вам +1 за подробный анализ. Тем не менее, это немного реализовать, поэтому мне потребуется некоторое время, чтобы оценить. Как только я это сделаю (при условии, что это работает), я поставлю галочку принятия. - person Sablefoste; 14.09.2015