Как вы пишите Valid XHTML 1.0 Строгий код, когда вы используете 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> 

Примечание ЛУ метки Обертывание JavaScript. Это в конечном итоге заполняется с помощью lis через скрипт, но в валидаторе он видит только незаселенную улицу.

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

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

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

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

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

Answer 3

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

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

Answer 4

Это может быть не самым популярным мнение по этой теме, но ...

Не беспокойтесь о 100% подтверждение. Это просто не большая сделка.

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

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

Answer 5

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

Я поставил < Ли > с «дисплей: нет» в < уль > Tag:

<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> 

Это не мешает сценарий и в в этом случае он работает, , и я думаю, что это не «« решение »:)