0

我正在通过 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>

注意包装 javascript 的 ul 标签。这最终会通过脚本用 lis 填充，但对于验证器来说，它只看到未填充的 ul。

提前致谢！

4

6 回答 6

7

以下片段是有效的 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>
于 2008-09-29T19:20:56.577 回答
2

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

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

您能否举一个带有无效代码的页面的 HTML / 链接的具体示例？

于 2008-09-29T18:44:20.563 回答
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>
于 2008-09-29T19:27:05.093 回答
1

我在 <ul> 标签中放了一个带有“display:none”的 <li>：

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

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

于 2010-06-13T00:22:29.140 回答
0

在某些时候页面变得有效，对吗？只有这样才能真正得到验证。

如果一个重要的页面是用大量 DOM 脚本构建的，我不确定它在构建过程中的每一点是否都有效。

于 2008-09-29T18:50:03.797 回答
0

这可能不是关于这个话题最流行的观点，但是......

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

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

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

于 2008-09-29T18:56:46.307 回答