[JS][IE] Problemen met document.write - Softwareontwikkeling

vrijdag 31 maart 2006 22:07

Acties:

It's a kind of magic

Topicstarter

Hallo, ik heb wat problemen met document.write in combinatie met IE.

Ik moet namelijk aan de hand van een JS script, de breedte van een venster bepalen en dit moet (helaas) op 2 manieren. Dat is op zich niet zo erg, de check is goed en werkt ook naar wens...

Punt is alleen, dat ik via document.write een ander script moet laden. Ook dit werkt goed, zowel in IE als in FF. Alleen zet IE de banner niet op de plek neer, waar ik verwacht waar het uit zou moeten komen. En ik weet eigenlijk ook niet hoe ik het op moet lossen.

Heb geprobeerd met een functie... En het script op de locatie laten draaien, waar de boel moet komen.

Voor een demo kun je terecht op http://www.flipdesign.nl/GoT/res.html en de gebruikte code is:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
    <table>
        <tr>
            <td>Test</td>
            <script type="text/javascript">
            if (window.innerWidth)
            {
                    document.write('<td width="226" class="style7"><div class="container8">');
                    document.write('<script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script>');
                    document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
                    document.write('</div></td><td width="10" class="style7"></td>');
            }
            else if (document.body)
            {
                if (document.body.offsetWidth)
                {
                    document.write('<td width="226" class="style7"><div class="container8">');
                    document.write('<script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script>');
                    document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
                    document.write('</div></td><td width="10" class="style7"></td>');
                }
                else
                {
                    document.write('<td width="226" class="style7"><div class="container8">');
                    document.write('Eigenschap niet ondersteund of uitgeschakeld!');
                    document.write('</div></td><td width="10" class="style7"></td>');       
                }
            }
            </script>

            <td>Test</td>
        </tr>
    </table>
</body>
</html>

Zoals in het voorbeeld te zien is, zet FF de banner (Google Syndication) op de goede plek... Echter doet IE iets totaal anders en onverwachts. IE schrijft de tabel cel wel maar zet de content voor die tabel cel boven de tabel(rij). Ik weet dat het gebruik van tabellen voor content geen goed idee is, maar kan op het moment niet met divs en dergelijke werken... Als de website af is (ik werk niet in mijn eentje aan de website waar het voor bedoeld is) ga ik de website ombouwen naar divs and the like...

Hopelijk snappen jullie het probleem en kunnen jullie mij (ons) helpen!

[ Voor 50% gewijzigd door CH4OS op 11-04-2006 00:01 ]

zaterdag 1 april 2006 00:40

Acties:

_Thanatos_

Ja, en kaal

document.write() werkt niet in XHTML... Gebruik liever nette DOM-code.

Dus je script netjes in de header (embedded) of in een aparte file (external). Dan in je onload je script aanroepen. Dat script zoekt dan die tabel op en doet z'n ding ermee.

Wist je trouwens dat <script> niet in een <td> voor mag komen? Dat mocht way back in HTML4 al niet, en nu nog steeds niet

[ Voor 72% gewijzigd door _Thanatos_ op 01-04-2006 00:47 ]

日本！🎌

zaterdag 1 april 2006 00:47

Acties:

crisp

Devver

Pixelated

googlesyndication genereert ook een iframe, dus Strict is ook te hoog gegrepen

Intentionally left blank

zaterdag 1 april 2006 12:00

Acties:

Verwijderd

_Thanatos_ schreef op zaterdag 01 april 2006 @ 00:40:
document.write() werkt niet in XHTML... Gebruik liever nette DOM-code.

hij gebruikt dan ook geen xhtml

dus werkt dat op zich wel

Wist je trouwens dat <script> niet in een <td> voor mag komen? Dat mocht way back in HTML4 al niet, en nu nog steeds niet

waar haal je dat dan vandaan? klopt niet hoor,<td> en <th> mogen %flow; bevatten, die bevat %inline;, die bevat %special;, die bevat <script>

[ Voor 37% gewijzigd door Verwijderd op 01-04-2006 12:04 ]

zaterdag 1 april 2006 17:04

Acties:

CH4OS

It's a kind of magic

Topicstarter

_Thanatos_ schreef op zaterdag 01 april 2006 @ 00:40:
document.write() werkt niet in XHTML... Gebruik liever nette DOM-code.

Dus je script netjes in de header (embedded) of in een aparte file (external). Dan in je onload je script aanroepen. Dat script zoekt dan die tabel op en doet z'n ding ermee.

Wist je trouwens dat <script> niet in een <td> voor mag komen? Dat mocht way back in HTML4 al niet, en nu nog steeds niet

De reden dat ik het script nog niet in de header heb staan, komt omdat dit alleen nog maar voor testing purposes is...

Plus dat ik zo (volgens mij) zekerder kan en mag zijn, over waar de boel weergegeven gaat worden... Ik zal het later in een externe JS zetten, met gebruik van een functie...

Verwijderd schreef op zaterdag 01 april 2006 @ 12:00:
hij gebruikt dan ook geen xhtml dus werkt dat op zich wel

Ik gebruikte wel XHTML, maar dat kwam omdat ik in Dreamweaver standaard altijd XHTML strict laat maken...

Code tik ik overigens verder zelf...

Maar was vergeten om hem HTML 4.01 transistional te maken (wat de uiteindelijke site worden zal)

crisp schreef op zaterdag 01 april 2006 @ 00:47:
googlesyndication genereert ook een iframe, dus Strict is ook te hoog gegrepen

Over de doctype, zie hierboven, was een klein foutje van mij...

Is opgelost inmiddels ook trouwens...

Maar ik snap nog steeds niet, waarom die banner verkeerd komt te staan en wat ik er aan kan doen?

[ Voor 82% gewijzigd door CH4OS op 23-09-2007 02:35 ]

zaterdag 1 april 2006 22:28

Acties:

Verwijderd

Verwijderd schreef op zaterdag 01 april 2006 @ 12:00:
<td> en <th> mogen %flow; bevatten, die bevat %inline;, die bevat %special;, die bevat <script>

Klopt, maar die <tr> mag geen <script> bevatten.
Die mag alleen een <td> of <th> bevatten.

Dus het script staat verkeert.

zaterdag 1 april 2006 23:09

Acties:

CH4OS

It's a kind of magic

Topicstarter

Verwijderd schreef op zaterdag 01 april 2006 @ 22:28:
[...]
Klopt, maar die <tr> mag geen <script> bevatten.
Die mag alleen een <td> of <th> bevatten.

Dus het script staat verkeert.

Hmmm... Dat gaat dan voor mij een probleem worden denk ik, aangezien juist het script bepaald of je een extra cel (<td>) krijgt of niet...

Heb even iets geprobeerd en het werkt nu inderdaad ook met IE. Probleem is alleen, omdat het nu in een cel moet, dat ik daar nu dus in feite geen style aan kan hangen... En het Javascriptje moet juist bepalen of er een extra cel komt of niet in de tabel... Iemand hier misschien een mooie en goede oplossing voor? Een voorbeeldje is trouwens te zien op http://www.flipdesign.nl/GoT/res2.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
    <table>
        <tr>
            <td>Test</td>
            <td>
                <script type="text/javascript">
                if (window.innerWidth)
                {
                    document.write('<script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script>');
                    document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');          
                }
                else if (document.body)
                {
                    if (document.body.offsetWidth)
                    {
                        document.write('<script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script>');
                        document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');
                    }
                    else
                    {
                        document.write('Eigenschap niet ondersteund of uitgeschakeld!'); 
                    }
                }
                </script>
            </td>
            <td>Test</td>
        </tr>
    </table>
</body>
</html>

Heb zelf geprobeerd, om het script dan zelf een extra <td> uit te laten poepen, maar dan zet IE de banner weer boven de tabel, wat niet de bedoeling is... Tevens is het natuurlijk ook geen mooie oplossing voor mijn probleem.

Eigenlijk is het wel jammer, dat je niet met PHP kan bepalen wat voor breedte iemand heeft voor een venster, anders was het heel erg gemakkelijk voor me...

[ Voor 255% gewijzigd door CH4OS op 11-04-2006 00:01 ]

zondag 2 april 2006 03:00

Acties:

_Thanatos_

Ja, en kaal

hij gebruikt dan ook geen xhtml dus werkt dat op zich wel

Hij heeft het stiekem veranderd... daar sta ik dan met m'n goeie gedrag

日本！🎌

zondag 2 april 2006 14:13

Acties:

CH4OS

It's a kind of magic

Topicstarter

_Thanatos_ schreef op zondag 02 april 2006 @ 03:00:
Hij heeft het stiekem veranderd... daar sta ik dan met m'n goeie gedrag

Ja sorry, moest idd HTML 4.01 als doctype hebben...

Maar mijn Dreamweaver heb ik standaard op XHTML strict staan...

zondag 2 april 2006 14:20

Acties:

JHS

Splitting the thaum.

Als je functies als appendChild gebruikt maakt het niet uit waar dat script staat, lijkt me

. Je zou dan de table kunnen selecteren, en vervolgens met de if condities kunnen bepalen of je er een gecreëerd child, de row, aan moet hangen

.

DM!

zondag 2 april 2006 16:47

Acties:

CH4OS

It's a kind of magic

Topicstarter

JHS schreef op zondag 02 april 2006 @ 14:20:
Als je functies als appendChild gebruikt maakt het niet uit waar dat script staat, lijkt me . Je zou dan de table kunnen selecteren, en vervolgens met de if condities kunnen bepalen of je er een gecreëerd child, de row, aan moet hangen .

Ik gebruik vooralsnog geen appendChild, maar als ik je verhaal zo hoor, lijkt dit me idd dé oplossing die ik hebben moet. Echter snap ik niet helemaal hoe de appendChild functie werkt, kan je me misschien een voorbeeldje doen toekomen?

zondag 2 april 2006 16:54

Acties:

JHS

Splitting the thaum.

http://jaap.deviousness.com/testcases/engine/js/dom.html

?

DM!

dinsdag 11 april 2006 00:00

Acties:

CH4OS

It's a kind of magic

Topicstarter

JHS schreef op zondag 02 april 2006 @ 16:54:
http://jaap.deviousness.com/testcases/engine/js/dom.html ?

Sorry voor de extreem late reactie, maar heb nu weer wat tijd gehad hiervoor, vandaar...

Bedankt in ieder geval voor de link!

Heb het geprobeerd, heb nu idd een script, die dit doet, maar dit script geeft de HTML als tekst weer, waardoor de advertentie dus niet zichtbaar word, als je schermbreedte hoger is dan 800px...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function resoCheck()
    {
        if (window.innerWidth > 800)
        {
            var td = document.getElementById('test');
            var newtext = document.createTextNode('<td width="226" class="style7"><div class="container8"><script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script></div></td><td width="10" class="style7"></td>');
            td.appendChild(newtext);
        }
        else if (document.body > 800)
        {
            var td = document.getElementById('test');
            var newtext = document.createTextNode('<td width="226" class="style7"><div class="container8"><script type="text/javascript" src="http://www.appieskamertjuh.nl/js/google.js"><\/script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><\/script></div></td><td width="10" class="style7"></td>');
            td.appendChild(newtext);
        }
        else
        {
            var td = document.getElementById('test');
            var newtext = document.createTextNode('Functie niet ondersteund :(');
            td.appendChild(newtext);        
        }
    }
    </script>
</head>
<body onload="resoCheck()">
    <table>
        <tr>
            <td>Test</td>
            <td id="test"></td>
            <td>Test</td>
        </tr>
    </table>
</body>
</html>

De tekst komt nu overigens zowel in IE als in FF op de goeie plaats, maar zoals eerder gezegt, dus niet als HTML die verwerkt word, wat wel de bedoeling is (en wat document.write dus wel doet)

IE geeft nu ook aan, dat de functie niet ondersteund is, terwijl volgens mij toch echt document.body voor IE is?

[ Voor 57% gewijzigd door CH4OS op 11-04-2006 00:11 ]

dinsdag 11 april 2006 07:01

Acties:

JHS

Splitting the thaum.

Het is niet zo gek dat er tekst verschijnt, je gebruikt createTextNode

. Je zal echt met zaken als createElement en createAttribute aan de slag moeten

.

DM!

dinsdag 11 april 2006 13:41

Acties:

CH4OS

It's a kind of magic

Topicstarter

JHS schreef op dinsdag 11 april 2006 @ 07:01:
Het is niet zo gek dat er tekst verschijnt, je gebruikt createTextNode . Je zal echt met zaken als createElement en createAttribute aan de slag moeten .

En die werken hetzelfde als createTextNode?

Neem aan van wel...

dinsdag 11 april 2006 13:43

Acties:

JHS

Splitting the thaum.

Zie http://www.w3.org/TR/2000...3/core.html#ID-1084891198 en http://www.w3.org/TR/2000...3/core.html#ID-2141741547

.

DM!