Как написать Valid XHTML 1.0 Strict код, когда вы используете javascript для заполнения элемента, который требует дочерний элемент?

Question

Я запускаю свой сайт через валидатор W3C, пытаясь заставить его пройти проверку как XHTML 1.0 Strict, и я столкнулся с особенно липкой (по крайней мере, по моему опыту) ошибкой валидации. Я включаю некоторые значки от различных сервисов на сайте, которые предоставляют свои собственные API и код для включения на внешний сайт. Эти значки используют JavaScript (по большей части) для заполнения элемента, который вы вставляете в разметку, для которой требуется дочерний элемент. Это означает, что, в конце концов, генерируется совершенно правильная разметка, но для валидатора все, что он видит, - это неполный тег parent-child, который затем выдает ошибку.

Как предупреждение, я понимаю, что могу пожаловаться в службы, что их значки не проверяются. Несмотря на это, я предполагаю, что кто-то проверил их код, в том числе и такие значки, и это то, что меня интересует. Такие ответы, как «Пожаловаться Flickr об их значке», не сильно мне помогут.

Дополнительная оговорка: я бы предпочел, чтобы как можно больше разметка оставалась семантической. И.Е. Добавление пустого тега li или пары tr-td для его проверки будет нежелательным решением, даже если это может быть необходимо. Если это единственный способ проверить это, да ладно, но, пожалуйста, склоните ответы к семантической разметке.

Как пример:

<div id="twitter_div">
<h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Обратите внимание на теги ul, заключающие javascript. Это в конечном итоге заполняется с помощью lis через скрипт, но для валидатора он видит только незаселенный ul.

Заранее спасибо!

Answer 1

Следующий фрагмент является допустимым XHTML и выполняет свою работу:

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter.com/stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

Answer 2

Решения могут быть разными для каждого значка. В случае с Twitter вы можете просто написать свою функцию обратного вызова. Вот пример, основанный на их коде значка:

<div id="twitter_div">
  <h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

Answer 3

Возможно, вы могли бы использовать javascript для написания исходного значка HTML? Возможно, вы захотите, чтобы код значка был вставлен в ваш документ, только если для его заполнения был доступен javascript, верно?

Вам просто нужно убедиться, что написание вашего документа происходит до javascript для различных значков.

Не могли бы вы привести конкретный пример HTML / ссылки на страницу с неверным кодом?

Answer 4

Я поставил

с "display: none" в теге

Answer 5

Возможно, это не самое популярное мнение по этой теме, но ...

Не беспокойтесь о 100% проверке. Это просто не так уж важно.

Цель проверки - сделать вашу разметку как можно более стандартной. Зачем? Потому что браузеры с заданной разметкой, которая не соответствует спецификации (например, разметка, которая не проверяется), выполняют свою собственную проверку ошибок, чтобы исправить ее и отобразить страницу так, как вы хотели, чтобы она смотрела на пользователя. Качество проверки ошибок в браузерах различается, yadda-yadda-yadda, лучше иметь правильную разметку ... Но даже ваш код не вызывает проверку! Люди, которые написали эти значки, вероятно, тестировали их в нескольких браузерах (и вы должны делать то же самое, конечно), если они работают как положено, просто оставьте это на этом.

Короче, нет приза за валидацию:)

Answer 6

В какой-то момент страница становится действительной, верно? Это единственный раз, когда это действительно может быть подтверждено.

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