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

Posted 2023-03-28

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

【英文标题】：How do you write Valid XHTML 1.0 Strict code when you are using javascript to fill an element that requires a child?

【发布时间】：2010-09-14 01:43:32

【问题描述】：

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

提前致谢！

【问题讨论】：

看起来 Twitter 正在使用插入 xhtml 的回调。对于 Twitter，您可以打开 twitter.com/javascripts/blogger.js 并查看 twitterCallback2() 并将其更改为您喜欢的工作方式。只需将新的回调函数名称传递给第二个脚本标签中的回调参数即可。

【参考方案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>

【讨论】：

我做了一个小改动，但这就是我最终的结果。我删除了parentNode.remove(placeHolderNode);。效果很好！

不应该是parentNode.removeChild(placeHolderNode)吗？

【参考方案2】：

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

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

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

【讨论】：

这是一个有趣的想法。这样，在原始标记中，脚本就是全部，而不是无效标记。嗯……：\

这只是意味着你隐藏了一些以后可能会被证明是无效的东西。我不确定您要验证的是什么 - 只是 HTML，还是浏览器/用户必须使用的整个页面 DOM？

【参考方案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&amp;count=1"></script>

【参考方案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&amp;count=1"></script>

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

【参考方案5】：

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

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

【讨论】：

我不确定我是否遵循您的推理。确实，在开发的每个阶段，您的标记都不能保证得到验证。但是，如果最终标记未通过验证，则以后将无法验证。我错过了什么？

您的验证器运行得太早了。在应用所有脚本后，它需要在最终构建的页面上运行。

【参考方案6】：

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

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

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

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

【讨论】：

我想除了任何实践标准的一般“优点”之外，验证没有“奖品”。验证甚至不能保证您的页面在任何地方都能正确显示。但是，我想支持 Web 开发中的标准运动。 :)

当然你想支持网络标准，我也是（我的网站验证）。我的观点是，通过不担心一些第三方徽章，你仍然支持 Web 标准，而不是全力以赴。网络不是一个完美的地方，你已经在尽自己的一份力了。