كيف تكتب كود XHTML 1.0 الصارم صالحًا عند استخدام جافا سكريبت لملء عنصر يتطلب طفلاً؟

Question

أقوم بتشغيل موقعي من خلال أداة التحقق من صحة W3C محاولًا التحقق من صحته باعتباره XHTML 1.0 Strict وقد واجهت خطأً في التحقق من الصحة لزجًا بشكل خاص (على الأقل في تجربتي).أقوم بتضمين شارات معينة من خدمات مختلفة في الموقع توفر واجهة برمجة التطبيقات الخاصة بها والتعليمات البرمجية الخاصة بها لتضمينها في موقع خارجي.تستخدم هذه الشارات جافا سكريبت (في معظم الأحيان) لملء عنصر تقوم بإدراجه في الترميز الذي يتطلب طفلاً.هذا يعني أنه في النهاية، يتم إنشاء علامة صالحة تمامًا، ولكن بالنسبة للمدقق، كل ما يراه هو علامة أصل غير مكتملة ثم يلقي خطأً عليها.

كتحذير، أفهم أنه يمكنني تقديم شكوى إلى الخدمات لعدم التحقق من صحة شاراتهم.بدون هذا، أفترض أن شخصًا ما قد قام بالتحقق من صحة الكود الخاص به أثناء تضمين شارات مثل هذه، وهذا ما يهمني.الإجابات مثل "شكوى إلى 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>

لاحظ علامات ul التي تغلف جافا سكريبت.يتم ملء هذا في النهاية بـ 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&amp;count=5"></script>

Answer 2

ربما يمكنك استخدام جافا سكريبت لكتابة شارة HTML الأولية؟ربما تريد فقط إدراج رمز الشارة في مستندك إذا كان جافا سكريبت متاحًا لملءه، أليس كذلك؟

كل ما عليك فعله هو التأكد من أن كتابة المستندات تتم قبل جافا سكريبت لشاراتك المتنوعة.

هل يمكنك إعطاء مثال محدد لرابط HTML/الصفحة التي تحتوي على رمز غير صالح؟

Answer 3

قد تختلف الحلول لكل شارة.في حالة تويتر، يمكنك فقط كتابة وظيفة رد الاتصال الخاصة بك.فيما يلي مثال بناءً على رمز الشارة الخاصة بهم:

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

لقد وضعت <li> مع "display:none" في علامة <ul>:

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

هذا لا يزعج البرنامج النصي وفي هذه الحالة يعمل ، وأعتقد أنه ليس "غير مرغوب فيه حل" :)

Answer 5

في مرحلة ما تصبح الصفحة صالحة، أليس كذلك؟هذه هي المرة الوحيدة التي يمكن التحقق من صحتها حقًا.

لست متأكدًا من أن الصفحة غير التافهة ستظل صالحة في كل نقطة أثناء إنشائها إذا تم إنشاؤها باستخدام الكثير من نصوص DOM النصية.

Answer 6

قد لا يكون هذا هو الرأي الأكثر شعبية حول هذا الموضوع، ولكن...

لا تقلق بشأن التحقق بنسبة 100%.إنها ليست صفقة كبيرة.

الهدف من التحقق هو جعل ترميزك قياسيًا قدر الإمكان.لماذا؟نظرًا لأن المتصفحات التي يتم منحها علامات لا تتوافق مع المواصفات (على سبيل المثال، العلامات التي لا يتم التحقق من صحتها) تقوم بالتحقق من الأخطاء الخاصة بها لتصحيحها وتعرض الصفحة بالطريقة التي تريدها أن تظهر بها للمستخدم.تختلف جودة التحقق من أخطاء المتصفحات، فمن الأفضل أن يكون لديك علامة صالحة...ولكن حتى الرمز الخاص بك ليس هو الذي يتسبب في فشل التحقق من الصحة!ربما قام الأشخاص الذين كتبوا هذه الشارات باختبارها في متصفحات متعددة (ويجب عليك أن تفعل الشيء نفسه بالطبع)، إذا كانت تعمل كما هو متوقع، فما عليك سوى ترك الأمر عند هذا الحد.

باختصار، ليس هناك جائزة للتحقق من صحة :)