Technologie 13. srpna 2004 v 20:04 Radek Hulán

XHTML, JavaScript a document.write()

K JavaScriptu je potřeba v XHTML dokumentu přistupovat o hodně odlišně, než v HTML (tedy jakýkoliv dokument, s MIME typem text/html, bez ohledu na jeho DOCTYPE). Protože XHTML již není ona směs znaků, ale well-formed kód, není možné jej v reálném běhu jen tak doplňovat o další, potencionálně neuzavřené, tagy. Jediný možný přístup je přes DOM. V tomto článku bych chtěl ukázat, jak si vytvořit, za pomocí DOM, jednoduchý toolbar pro snadnější vkládání komentářů, tak aby fungoval v XHTML.

Nejdříve příklad definice CSS:

#toolbar {
  display:block;
  margin:5px 0 5px 0; }

#toolbar a:link,#toolbar a:visited{ 
  display: block; 
  float: left; 
  width: 50px; 
  height: 15px; 
  background: blue; 
  color: white;
  border: 1px outset; 
  margin: 3px; 
  text-align: center; 
  font-size: small; }

#toolbar a:hover{ 
  background: red; 
  color: yellow; 
  border-style:inset }

Cílem našeho DOM skriptu bude vytvořit následující menu které budeme vytvářet pomocí DOM, nikoliv přímým zápisem v XHTML, ale ani pomocí document.write, důvodem je, aby se toto menu nezobrazovalo pro browsery, které JavaScript nepodporují, či jej má uživatel zakázán, a aby bylo použitelné v XHTML:

<div id='toolbar'>
 <a href='javascript:ct("[strong] [/strong]");' >bold</a>
 <a href='javascript:ct("[em] [/em]");' >italics</a>
... a další značky ...
</div>
<form method='post'><fieldset>
  <textarea id='idbody' name='body'></textarea>
  <input type='submit' value='Odeslat komentář' />
</fieldset></form>

Tento kód převedeme do JS (DOM) následovně:

// pomocná funkce pro vložení textu do komentáře
function ct(text){ 
 if (p=document.getElementById('idbody')){
   p.focus(); 
   p.value+=" "+text;
 }
}

var isXHTML;
function createNewEle(ele){
 if(isXHTML) { 
   return document.createElementNS(
    'http://www.w3.org/1999/xhtml', ele); 
 } else { 
   return document.createElement(ele); 
 };
};

// vytvoření toolbaru
function commentFormExtras(){
 isXHTML=/html\:/.test(
  document.getElementsByTagName('body')[0].nodeName);
 var ele=document.getElementById('idbody');
 if (!ele) return;
 var base=ele.parentNode.insertBefore(
           createNewEle('div'),ele);
 // id pro vytvořený DIV
 base.id='toolbar';
 // prvky toolbaru
 var toolbar=[
  'strong','cite','em','q',
  'abbr','code','link'];
 // jejich href
 var href=[
  '[strong] [/strong]','[cite] [/cite]',
  '[em] [/em]','[q] [/q]','[abbr] [/abbr]',
  '[code] [/code]','[a href=url]text[/a]'];
 // title v linku
 var title=[
  'bold text','citation','emphasized text',
  'short quotation','abbreviation',
  'source code','link/anchor'];
 for(var i=0; i<toolbar.length; i++) {
   var aEle;
   (aEle=base.appendChild(
    createNewEle('a'))).appendChild(
     document.createTextNode(toolbar[i]));
   aEle.href='javascript:ct(\''+href[i]+'\')';
   aEle.title=title[i];
};

Funkci commentFormExtras() potom můžeme zavolat přímo (což je vhodnější), nebo za pomoci window.onload události, zde je ovšem nevýhoda, že se čeká až na natažení celé stránky.

Pod XHTML rozumím zásadně dokument posílaný s MIME typem application/xhtml+xml.