자식이 필요한 요소를 채우기 위해 JavaScript를 사용할 때 유효한 XHTML 1.0 엄격한 코드를 어떻게 작성합니까?

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

문제

W3C의 유효성 검사기를 통해 내 사이트를 XHTML 1.0 엄격하게 검증하려고 노력하고 있으며 특히 끈적 끈적한 (적어도 내 경험에서) 검증 오류로 내려갔습니다. 저는 사이트에 다양한 서비스의 특정 배지를 포함하여 자체 API와 외부 사이트에 포함시키기위한 코드를 제공합니다. 이 배지는 JavaScript (대부분)를 사용하여 자식이 필요한 마크 업에 삽입하는 요소를 채 웁니다. 이것은 결국 완벽하게 유효한 마크 업이 생성되었지만 유효성 검사기에게는 불완전한 부모-자녀 태그가있는 모든 것이 오류를 던진다는 것을 의미합니다.

경고로서, 나는 배지가 검증되지 않는 서비스에 불만을 제기 할 수 있다는 것을 이해합니다. SANS 이것으로, 나는 누군가가 이와 같은 배지를 포함하는 동안 코드를 검증했다고 가정합니다. 그것이 내가 관심있는 것입니다. '그들의 배지에 대해 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>

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 / 링크의 특정 예를 제공 할 수 있습니까?

솔루션은 각 배지마다 다를 수 있습니다. 트위터의 경우 자신의 콜백 기능 만 작성할 수 있습니다. 다음은 배지 코드를 기반으로 한 예입니다.

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

나는 au003Cli> "디스플레이 : 없음"으로u003Cul> 꼬리표:

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

이것은 스크립트를 방해하지 않으며이 경우 작동하지 않으며, 나는 그것이 아니라고 생각합니다.탐탁지 않은 해결책" :)

어느 시점에서 페이지가 유효 해집니다. 그것이 실제로 검증 될 수있는 유일한 시간입니다.

많은 DOM 스크립팅으로 구성된 경우 사소한 페이지가 건설 중 모든 시점에서 유효한 상태로 유지 될지 확신 할 수 없습니다.

이것은이 주제에 대해 가장 인기있는 의견은 아니지만 ...

100% 검증에 대해 걱정하지 마십시오. 그렇게 큰 거래는 아닙니다.

검증의 요점은 마크 업을 가능한 표준으로 만드는 것입니다. 왜요? 사양 (예 : 검증되지 않은 마크 업)을 준수하지 않는 마크 업이 제공되는 브라우저는 자체 오류 검사를 수행하여 사용자에게 보려는 의도 한 모습을 수정하고 페이지를 표시합니다. 브라우저의 품질 오류 확인은 다양합니다. Yadda-Yadda-Yadda는 유효한 마크 업을 사용하는 것이 좋습니다. 그러나 유효성 검사가 실패하는 코드조차 아닙니다! 그 배지를 쓴 사람들은 아마도 여러 브라우저에서 테스트했을 것입니다 (물론 예상대로 작동한다면 똑같이해야합니다).

요컨대, 검증에 대한 상이 없습니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top