JS-Code nicht kompatibel mit XHTML

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
Antworten
P7BB
Mitglied
Beiträge: 383
Registriert: 15.07.2008 19:40

JS-Code nicht kompatibel mit XHTML

Beitrag von P7BB »

Hallo,

ich habe ein kleines Problem mit einem Javascript-Code. Dieser soll in eine XHTML-Seite eingebaut werden, funktioniert dort allerdings nicht. Leider konnte ich noch nicht herausfinden, warum es nicht geht oder wie man das ändern kann. Grundsätzlich funktioniert das Script aber, doch eben nur dann, wenn die DTD nicht angegeben ist. Begutachten kann man das ganze hier:

funktionierend ohne DTD: http://id-club.de/snowtest/snowtest.php
fehlerhaft mit DTD: http://id-club.de/snowtest/snowtest.php?x=true

Vielleicht findet ja von euch jemand das Problem und kann mir helfen. Hier noch die wesentlichen Codes:

snowtest.php

Code: Alles auswählen

<?php
$x=$_GET['x'];
if($x) echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="flake.js"></script>
<script type="text/javascript" src="flake2.js"></script>
</head>
<body bgcolor="#777777" onload="loadSnow()">
<div id="wholecontent">
</div>
</body>
</html>
flake2.js

Code: Alles auswählen

var numImages = 1;
var numFlakes = 20;
var ns  = (document.layers)?1:0;
var ns6 = (document.getElementById&&!document.all)?1:0;
var opera5 = (navigator.userAgent.indexOf("Opera") > -1 && document.getElementById) ? 1:0;
var winWidth  = (ns||ns6||opera5)?window.innerWidth-70:window.document.body.clientWidth;
var winHeight = (ns||ns6||opera5)?window.innerHeight:window.document.body.clientHeight;

var flakeX = new Array();
var flakeY = new Array();
var flakeSpeed = new Array();
var flakeStep  = new Array();
var flakeStep2 = new Array();


function loadSnow() {

for (i=0; i<numImages; i++)
{
eval('imgFlake' + i + '=new Image();');
eval('imgFlake' + i + '.src="./flake.gif";');
}


if (ns)
{
for (i=0; i<numFlakes; i++)
{ 
eval('var picSource=imgFlake' + Math.floor(Math.random()*numImages) + '.src;');
document.getElementById('wholecontent').innerHTML+='<layer name="layerFlake' + i + '" left="0" top="0"><img src="' + picSource + '"></layer>';
}

} else { 
document.getElementById('wholecontent').innerHTML+='<div style="position:absolute;top:0px;left:0px;"><div style="position:relative">';
for (i=0; i<numFlakes; i++)
{
eval('var picSource=imgFlake' + Math.floor(Math.random()*numImages) + '.src;');
document.getElementById('wholecontent').innerHTML+='<img id="layerFlake' + i + '" src="' + picSource + '" style="position:absolute;top:0px;left:0px" />';
}
document.getElementById('wholecontent').innerHTML+='</div></div>';
}


for (i=0; i<numFlakes; i++)
{
flakeX[i] = Math.round(Math.random()*winWidth);
flakeY[i] = Math.round(Math.random()*winHeight);
flakeSpeed[i] = Math.random()*3+3;
flakeStep[i]  = Math.random()*0.1+0.05;
flakeStep2[i] = 0;
}

fLetItSnow();
}

function fLetItSnow()
{
var winWidth  = (ns||ns6||opera5)?window.innerWidth-70:window.document.body.clientWidth;
var winHeight = (ns||ns6||opera5)?window.innerHeight:window.document.body.clientHeight;
var wscrll    = (ns||ns6||opera5)?window.pageXOffset:document.body.scrollLeft;
var hscrll    = (ns||ns6||opera5)?window.pageYOffset:document.body.scrollTop;

for (i=0; i<numFlakes; i++){
speedX = flakeSpeed[i]*Math.cos(flakeStep2[i])/2;
speedY = flakeSpeed[i]*Math.sin(90*Math.PI/180);
flakeX[i] += speedX; 
flakeY[i] += speedY;

if (flakeY[i]>winHeight)
{
flakeX[i]=Math.round(Math.random()*winWidth);
flakeY[i]=-100;
flakeSpeed[i]=Math.random()*3+3;
}

if (ns)
{
document.layers['layerFlake' + i].left = flakeX[i];
document.layers['layerFlake' + i].top  = flakeY[i] + hscrll;

} else if (ns6||opera5) { 
document.getElementById("layerFlake" + i).style.left = Math.min(winWidth,flakeX[i]);
document.getElementById("layerFlake" + i).style.top  = flakeY[i] + hscrll;

} else {
eval("document.all.layerFlake" + i).style.left = flakeX[i];
eval("document.all.layerFlake" + i).style.top  = flakeY[i] + hscrll;
}
flakeStep2[i]+=flakeStep[i];
}
setTimeout('fLetItSnow()', 20);
}
Benutzeravatar
StarWolf3000
Mitglied
Beiträge: 1019
Registriert: 25.07.2005 10:20
Wohnort: Stolpen
Kontaktdaten:

Beitrag von StarWolf3000 »

Zuerst einmal: welchen Browser benutzt du zum Testen?

Testergebnisse auf meinem Notebook:

Internet Explorer 6.0:
Quirks Mode (ohne DTD): Script startet nicht
Standard Mode (mit DTD): Script startet nicht

Mozilla Firefox 2.x:
Quirks Mode (ohne DTD): Script läuft
Standard Mode (mit DTD): Script startet nicht

Opera 9.62:
Quirks Mode (ohne DTD): Script läuft
Standard Mode (mit DTD): Script läuft

Da die Scripte ausgelagert sind, sollte es normalerweise funktionieren, in jedem Browser in jedem Modus.

Aber vielleicht bringt es was, wenn du die Zeilen so einbindest:

Code: Alles auswählen

<script type="text/javascript" src="flake.js">
/* <![CDATA[ */
/* ]]> */
</script> 
<script type="text/javascript" src="flake2.js">
/* <![CDATA[ */
/* ]]> */
</script>
MOD-Einbauhilfe und Installationen über ICQ, TeamSpeak 2/3 und TeamViewer. Support nur im Forum, eingeschränkt per TeamViewer, aber nicht mehr per PN! • KB:knigge
P7BB
Mitglied
Beiträge: 383
Registriert: 15.07.2008 19:40

Beitrag von P7BB »

Also ich habe es mit Firefox und zwischenzeitlich auch mit IE getestet. Früher ging es eigentlich ohne DTD auch im IE. Allerdings habe ich mittlerweile auch den Code etwas abgeändert, da javascript-funktionen wie document.write verwendet wurden, die angeblich bei xhtml zu problemen führen können. Daher habe ich stattdessen mit DOM-Objekten über die ID gearbeitet.

Aja und ich habe die Scripts testweise auch nochmal mit den CDATA-Bereichen ausgestattet, aber auch diesmal leider erfolglos.
Antworten

Zurück zu „Coding & Technik“