javascriptを使用して子を必要とする要素を埋めるときに、有効なXHTML 1.0 Strictコードをどのように記述しますか？

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

質問

XHTML 1.0 Strictとして検証するためにW3Cのバリデーターを介してサイトを実行していますが、（少なくとも私の経験では）特にスティッキーな検証エラーに陥りました。外部サイトに含めるための独自のAPIとコードを提供するサイトのさまざまなサービスの特定のバッジを含めています。これらのバッジは、JavaScriptを（ほとんどの場合）使用して、子を必要とするマークアップに挿入する要素を埋めます。つまり、最終的には完全に有効なマークアップが生成されますが、バリデーターには、不完全な親子タグのみが表示され、エラーがスローされます。

警告として、バッジが検証されないとサービスに不満を言うことがあることを理解しています。そうではないので、誰かがこのようなバッジを含めながらコードを検証したと思います。それが私が興味を持っていることです。 >

追加の警告：マークアップは可能な限りセマンティックのままにしておくことをお勧めします。 I.E.検証するために空の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のみが表示されます。

事前に感謝します！

役に立ちましたか？

解決

次のフラグメントは有効な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>

<！> lt; li <！> gt; with <！> quot; display：none <！> quot; <！> lt; ul <！> gt;タグ：

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

これはスクリプトを妨害せず、この場合は動作しますが、 <！> quot; 望ましくない解決策ではない<！> quot; ：）

ある時点でページが有効になりますか？本当に検証できるのはそれだけです。

多くのDOMスクリプティングで構築されている場合、重要なページが構築中のすべての時点で有効であるかどうかはわかりません。

これは、このトピックに関する最も一般的な意見ではないかもしれませんが、...

100％の検証については心配しないでください。そんなに大したことじゃない。

検証のポイントは、マークアップを可能な限り標準にすることです。どうして？仕様に適合しないマークアップ（検証されないマークアップなど）が指定されたブラウザは、独自のエラーチェックを行って修正し、ユーザーに意図したとおりにページを表示するためです。ブラウザのエラーチェックの品質はさまざまです。yadda-yadda-yadda、有効なマークアップを使用した方がよいでしょう...しかし、検証が失敗する原因となっているのはコードでもありません！それらのバッジを書いた人は、おそらく複数のブラウザでテストしました（もちろん、同じことをする必要があります）。期待どおりに動作する場合は、そのままにしておきます。

要するに、検証に賞品はありません：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top