Hallo zusammen,
ich habe bislang folgendes in meiner Datei gehabt:
<html>
<head></head>
<body>
<canvas id="mainCanvas" width="1000" height="600"></canvas>
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
Ich muss erst das canvas-Tag anlegen da in der include-Datei folgendes steht:
document.write('<link type="text/css" href="css/style.css" rel="stylesheet">');
document.write('<script type="text/javascript" src="js/globals.js"></script>');
document.write('<script type="text/javascript" src="js/maths.js"></script>');
var canvas = document.getElementById("mainCanvas");
var ctx = null;
if (canvas.getContext) {
alert("Benutze Canvas");
ctx = canvas.getContext('2d');
} else {
alert("Benutze wz_jsgraphics.js");
document.write('<script type="text/javascript" src="js/wz_jsgraphics.js"></script>');
document.write('<script type="text/javascript" src="js/turtle.js"></script>');
document.write('<script type="text/javascript" src="js/inits.js"></script>');
}
document.write('<script type="text/javascript" src="js/input_output.js"></script>');
Unter Firefox geht das prima, unter IE selbstverständlich nicht. Allerdings erhalte ich da einen sehr merkwürdigen Fehler. Es funktioniert alles mit Ausnahme von wz_jsgraphics.js . Dort werden merkwürdig falsche Linien gezeichnet.
Funktionieren tut es unter IE aber so:
<html>
<head>
<script type="text/javascript" src="js/include.js"></script>
</head>
<body>
<canvas id="mainCanvas" width="1000" height="600"></canvas>
</body>
</html>
Allerdings geht es dann natürlich nicht mehr unter Firefox, weil er zum Ladezeitpunkt das <canvas> nicht kennt.
Gibt es eine elegantere Möglichkeit als diese hier:
<html>
<head>
function init() {
document.write('<script type="text/javascript" src="js/include.js"></script>');
}</head>
<body onLoad="init()">
<canvas id="mainCanvas" width="1000" height="600"></canvas>
</body>
</html>