当您使用 javascript 填充需要子元素的元素时，如何编写有效的 XHTML 1.0 Strict 代码？

Question

我正在通过 W3C 的验证器运行我的网站，试图使其按照 XHTML 1.0 Strict 进行验证，但我遇到了一个特别棘手的（至少根据我的经验）验证错误。 我在网站中包含了来自各种服务的某些徽章，这些徽章提供了自己的 API 和代码以包含在外部网站上。 这些徽章（大部分）使用 javascript 来填充您在需要子标记的标记中插入的元素。 这意味着最终会生成完全有效的标记，但对于验证器来说，它看到的只是一个不完整的父子标记，然后会抛出错误。

需要注意的是，我知道我可以向服务机构投诉他们的徽章无法验证。 如果没有这个，我假设有人在包含这样的徽章的同时验证了他们的代码，这就是我感兴趣的。诸如“向 Flickr 投诉他们的徽章”之类的答案不会对我有太大帮助。

额外的警告：我希望标记尽可能保持语义。 IE 添加空的 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&count=5"></script>

Answer 2

也许您可以使用 javascript 编写初始徽章 HTML？ 如果可以使用 javascript 填充徽章代码，您可能只想将其插入文档中，对吗？

您只需要确保您的文档编写发生在各种徽章的 javascript 之前。

您能否给出包含无效代码的页面的 HTML/链接的具体示例？

Answer 3

每个徽章的解决方案可能有所不同。 对于 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&count=1"></script>

Answer 4

我放了一个

中带有“display:none” 标签：

<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&count=1"></script>

这不会干扰脚本，在这种情况下它可以工作，
我认为这不是一个“不可取的解决方案”:)

Answer 5

在某个时刻该页面会变得有效，对吧？ 这是唯一一次可以真正验证这一点。

我不确定如果一个不平凡的页面是用大量 DOM 脚本构建的，那么它在构建过程中的每个点都会保持有效。

Answer 6

这可能不是该主题上最流行的观点，但是...

不要担心 100% 验证。 这没什么大不了的。

验证的目的是使您的标记尽可能标准。 为什么？ 因为被赋予不符合规范的标记（例如，未验证的标记）的浏览器会进行自己的错误检查以纠正错误并按照您希望用户看到的方式显示页面。 浏览器错误检查的质量各不相同，yadda-yadda-yadda，最好有有效的标记...但导致验证失败的甚至不是您的代码！ 编写这些徽章的人可能在多个浏览器中测试了它们（当然，您也应该这样做），如果它们按预期工作，则将其保留。

简而言之，验证没有奖励:)