JavaScript Forum

**Moldarin** · 06-08-2006, 09:37 AM

XHTML (MIME: application/xhtml+xml) do not support document.write in JavaScripts any longer.

Instead you should use JavaScript DOM.

I have been testing a little with rewriting advertisement from AdBrite found on my Website's frontpage to using DOM (with a little help of PHP). But I have had no succsess with this.

So I am wondering... How do I deal with external services, such as advertisors and traffic tracking services, and still be able to serve documents as the Web standars format XHTML?

(and do not bother reply with «You should just use HTML!»)

**ADAM Web Design** · 06-08-2006, 04:54 PM

document.getElementById("your_div").innerHTML = "<p>Section of rewritten code.</p>";

That might be what you mean.

**chrishirst** · 06-08-2006, 06:05 PM

while Adam is correct in the use of innerHTML would work, it is not a DOM method. It started as a proprietary MS method and has been adopted by other browser developers. This means it is NOT necessarily "future-proofed" and may just disappear or be not implemented in future browsers.
If all things were equal in (X)HTML development it will be adopted by the W3C and included into the DOM.

for a true DOM script to create a div and a link in a container it would be

HTML Code:

// create a div element
eleDIV = document.createElement("div");
eleDIV.setAttribute("id","childDIV");
// create a link 
Anchor = document.createElement("a");
Anchor.setAttribute("href","http://www.webmaster-talk.com/");
Anchor.appendChild(document.createTextNode("Webmaster Talk forum"));
eleDIV.appendChild(Anchor);
// insert the div and link into the container
document.getElementById("container").appendChild(eleDIV);

but the innerHTML method is much quicker and less code

HTML Code:

document.getElementById("container").innerHTML = "<div id=\"eleDiv\"><a href=\"http://www.webmaster-talk.com\">Webmaster Talk forum</a></div>";

**mastercomputers** · 06-13-2006, 10:47 AM

I was finally able to look at that script from adbrite, although whether something about it is dynamic or not I have no clue so you must work on that, I've just provided a way you could write it, it's not efficient as I quickly wanted to show you how to do such things.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <title>Untitled</title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function init()
    {
      var place = document.getElementById('thislocation');
      var frag = document.createDocumentFragment();
      var mbtb = document.createElement('table');
      var tr = document.createElement('tr');
      var mbtd = document.createElement('td');
      var a1 = document.createElement('a');
      var strong = document.createElement('strong');
      var text1 = document.createTextNode('Free Blog with domains!');
      var span1 = document.createElement('span');
      var br = document.createElement('br');
      var a2 = document.createElement('a');
      var span2 = document.createElement('span');
      var text2 = document.createTextNode('Domains as low as $1.19/ea, free website and more');

      frag.appendChild(mbtb);
        mbtb.setAttribute('style', 'width: 100%');
        mbtb.setAttribute('id', 'mbtb');
        mbtb.className = 'adbrite_table';
      mbtb.appendChild(tr);
      tr.appendChild(mbtd);
        mbtd.setAttribute('style', 'width: 50%; vertical-align: top;');
        mbtd.setAttribute('id', 'mbtd');
      mbtd.appendChild(a1);
      mbtd.appendChild(br);
      mbtd.appendChild(a2);
        a1.setAttribute('href','http://click.adbrite.com/mb/click.php?sid=98201&banner_id=10270075&cpc=302e3035&ssc=daeff247b05bfddb5242be8a187fff5e&keyword_id=638');
        a1.className = 'adHeadline';
      a1.appendChild(strong);
      strong.appendChild(span1);
        span1.className = 'adHeadline';
      span1.appendChild(text1);
        a2.setAttribute('href', 'http://click.adbrite.com/mb/click.php?sid=98201&banner_id=10270075&cpc=302e3035&ssc=daeff247b05bfddb5242be8a187fff5e&keyword_id=638');
        a2.className = 'adText';
      a2.appendChild(span2);
        span2.className = 'adText';
      span2.appendChild(text2);
      place.appendChild(frag);
    }
    /*]]>*/
    </script>
  </head>
  <body onload="init()">
    <div id="thislocation">
    </div>
  </body>
</html>

This produces what I got from that script however I've removed events that did nothing but alter the status bar and also deprecated attributes that I hope does not affect the operations of this ad, though I'm positive you can determine that.

Cheers,

MC

**mastercomputers** · 11:38 AM

Sorry, I just tested this under IE6 and realised that setAttribute will not work with it so I have to devise a new way of doing this, give me a few ticks to update the code.

This is crazy, I've written 4 different methods each working under Firefox but fails under IE6. It's gotten to the stage that I think the best method is detecting if the object element.innerHTML exists and just display the string as formatted while using falling back on using DOM creation for browsers that do understand it, otherwise I'm going to cause major incompatibilities with other browsers if I continue.

Cheers,

MC

**funkdaddu** · 06-13-2006, 05:29 PM

From the QuirksMode.org blog:

http://www.quirksmode.org/bugreports...d_with_th.html

check the comments, there's a couple suggestions to work around the setAttribute problem in IE

**mastercomputers** · 06-14-2006, 09:50 PM

Let me work with this some more, there seems to be another problem with IE6 in creating this so I need to research more into the problems. I don't think there's a real need to worry about setAttribte('class') problem that IE has if we just store that inside a CSS file, it's not really vital for this, but the alternative workaround which seems to work on other browsers too is:

Code:

element.style.cssText = 'Your CSS Code, e.g. width: 100%;';

I've also done tests where I eliminated all the tags created and just applied some attributes which worked fine with IE, which could quite possibly relate to the document.createDocumentFragment(); which is an unknown problem to me so I'll continue testing till I get it correct, hopefully it's not because using a Fragment is quicker than building directly to the page.

So I'll continue building the DOM bit by bit till I figure out where the problem is coming from. I'm positive I will solve this.

Because it's an ad does it changes frequently (links, text, etc) and if so, is its feasible (performance wise) whether you could capture what the script returns, as when viewing it, all I saw was document.write('...'); so if that's what it will always return, then it should be easy to rewrite it by string detection.

Cheers,

MC

**mastercomputers** · 06-14-2006, 10:55 PM

Here's my fixed up version working with IE6, apparently the problem is that IE requires a TBODY tag for table creation, which is fair enough I guess, but was quite hard finding out that this was the cause.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <title>Untitled</title>
    <script type="text/javascript">
    //<![CDATA[
    function init()
    {
      var place = document.getElementById('thislocation');
      var frag = document.createDocumentFragment();
      var mbtb = document.createElement('table');
      var tblbody = document.createElement('tbody');
      var tr = document.createElement('tr');
      var mbtd = document.createElement('td');
      var a1 = document.createElement('a');
      var strong = document.createElement('strong');
      var text1 = document.createTextNode('Free Blog with domains!');
      var span1 = document.createElement('span');
      var br = document.createElement('br');
      var a2 = a1.cloneNode(false);
      var span2 = span1.cloneNode(false);
      var text2 = document.createTextNode('Domains as low as $1.19/ea, free website and more');

      frag.appendChild(mbtb);
        mbtb.style.cssText = 'width: 100%;';
        mbtb.setAttribute('id', 'mbtb');
        mbtb.className = 'adbrite_table';
      mbtb.appendChild(tblbody);
      tblbody.appendChild(tr);
      tr.appendChild(mbtd);
        mbtd.style.cssText = 'width: 50%; vertical-align: top;';
        mbtd.setAttribute('id', 'mbtd');
      mbtd.appendChild(a1);
      mbtd.appendChild(br);
      mbtd.appendChild(a2);
        a1.setAttribute('href','http://click.adbrite.com/mb/click.php?sid=98201&banner_id=10270075&cpc=302e3035&ssc=daeff247b05bfddb5242be8a187fff5e&keyword_id=638');
        a1.className = 'adHeadline';
      a1.appendChild(strong);
      strong.appendChild(span1);
        span1.className = 'adHeadline';
        span1.appendChild(text1);
        a2.setAttribute('href', 'http://click.adbrite.com/mb/click.php?sid=98201&banner_id=10270075&cpc=302e3035&ssc=daeff247b05bfddb5242be8a187fff5e&keyword_id=638');
        a2.className = 'adText';
      a2.appendChild(span2);
        span2.className = 'adText';
      span2.appendChild(text2);
      place.appendChild(frag);
    }
    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="thislocation"></div>
  </body>
</html>

You may want to look at Dean Edwards windows.onload Problem Solved for a faster loading method so that load time is quicker. I've also fixed the setAttribute('style'... problem, now all that really needs doing is understanding how the href string is generated, you'll probably want to also look over parts of the attributes I left out, many of the events which just changed the statusbar text.

Cheers,

MC

**Moldarin** · 06-15-2006, 08:45 AM

And introducing another problem:

The ads change. And they do so often too.

And I am not allowed to modify the codes either. Just found it hidden away in the fine prints of the agreement.

**mastercomputers** · 06-15-2006, 09:23 PM

Hey Moldarin,

I think all advertisers have this fine print agreement, but it's probably due to what trouble could be caused but if you sent them a reason and maybe a solution for how you'd deal with it, they may allow it if they find it isn't different to what they have in place, though might be a good idea to keep the statustext change code, but it's not going to work on all browsers.

I know Google allowed such changes but it'd be best to ask first, since they too did not have a standards compliance way for their adverts.

Cheers,

MC