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

StackOverflow https://stackoverflow.com/questions/149844

Вопрос

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

В качестве предостережения, я понимаю, что мог бы пожаловаться в службы на то, что их бейджи не подтверждаются.Без этого я предполагаю, что кто-то проверил свой код, включив такие значки, и это то, что меня интересует.Такие ответы, как "Пожалуйтесь 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.

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

Это было полезно?

Решение

Следующий фрагмент является допустимым 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>

Другие советы

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

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

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

Решения могут быть разными для каждого значка.В случае с 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>

Я положил <li> с "дисплей:нет" в <ul> Тег:

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

Это не нарушает работу скрипта, и в данном случае он работает, и я думаю, что это не "нежелательный решение" :)

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top