jack: js-Datei dynamisch einbinden

Beitrag lesen

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>