Voor een webapplicatie wil ik een functie maken die dynamisch JavaScipt bestanden kan inladen. Die functie is al geschreven en staat een paar regels hieronder. Stel dat ik een simpel test bestand wil inladen dan kan ik dat via het volgende stukje code doen: "includeJS('/static/javascript/TestClass.js');". De inhoud van het JavaScript bestand staat een paar regels hieronder.
De functie maakt een nieuw <script> tag aan en zet de attributen "type" (waarde: "text/javascript") en "src". Attribute "src' bevat de waarde die meegegeven wordt als de functie aangeroepen wordt (bv.: "/static/javascript/Bestand.js"). Na het aanmaken van de tag wordt deze in de <head> tag van de pagina geplaatst als hij nog niet bestaat. Hetzelfde JavaScript bestand zal nooit twee keer als element binnen de <head> tag geplaatst worden.
Inhoud van "/static/javascript/TestClass.js":
Echter, volgend stukje faalt. De melding "TestClass is not defined" komt tevoorschijn als "window.alert(TestClass)" wordt uitgevoerd terwijl de <script> tag wel goed toegevoegd is aan de <head> tag. Als ik de functie "includeJS" aanpas en na de laatste regel ("nodeHead.appendChild(element);") binnen die functie de code "window.alert('');" toevoeg werkt het wel. Ik krijg dan de inhoud van de TestClass op mijn scherm ge-alert.
Waar het precies aan ligt weet ik niet, maar ik denk dat de toegevoegde window.alert aan de IncludeJS functie ervoor zorgt dat er een delay is en de browser zo de tijd krijgt om het JavaScript in te laden. Kan iemand dit bevestigen en als dit inderdaad het probleem is, hoe kan ik dit dan het beste oplossen? Een setTimeout gebruiken naar een functie die controleert of de klasse bestaat zou dan een optie kunnen zijn, maar er moet een betere manier zijn. Een while loop die constant checkt of de klasse bestaat is erg CPU intensief, dus dat is niet echt een optie.
Het probleem is niet browser specifiek en de gebruikte code is volgens JSLint ook correct. "document.createElement('script')" vervangen door een "document.write" regel om zo een script tag in de body van de pagina te schrijven lost het probleem ook niet op.
Hopelijk kan iemand mij advies geven. Bedankt voor elke reactie
.
De functie maakt een nieuw <script> tag aan en zet de attributen "type" (waarde: "text/javascript") en "src". Attribute "src' bevat de waarde die meegegeven wordt als de functie aangeroepen wordt (bv.: "/static/javascript/Bestand.js"). Na het aanmaken van de tag wordt deze in de <head> tag van de pagina geplaatst als hij nog niet bestaat. Hetzelfde JavaScript bestand zal nooit twee keer als element binnen de <head> tag geplaatst worden.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| function includeJS(src) { var node, nodeHead; var alreadyIncluded = false; nodeHead = document.getElementsByTagName('head')[0]; // Walk through each "script" element within the header of the page. for (var i = 0; i < nodeHead.getElementsByTagName('script').length; i++) { node = nodeHead.getElementsByTagName('script').item(i); // Check if attribute "type" exists and is set to "text/css". if ((node.attributes.getNamedItem('type') === null) || (node.attributes.getNamedItem('type').value != 'text/javascript')) { continue; } // Check if attribute "src" exists. if (node.attributes.getNamedItem('src') === null) { continue; } // Check if the found JS file is the same as the JS file to be included. if (node.attributes.getNamedItem('src').value == src) { alreadyIncluded = true; } } // Do nothing if the file has been included before. if (alreadyIncluded === true) { return; } // Create a new script element. var element = document.createElement('script'); element.setAttribute('type', 'text/javascript'); element.setAttribute('src', src); // Add it to the page header. nodeHead.appendChild(element); } |
Inhoud van "/static/javascript/TestClass.js":
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
| function TestClass() { var somethingSomething = "anything"; this.echoSomething = function() { window.alert(somethingSomething); }; } |
Echter, volgend stukje faalt. De melding "TestClass is not defined" komt tevoorschijn als "window.alert(TestClass)" wordt uitgevoerd terwijl de <script> tag wel goed toegevoegd is aan de <head> tag. Als ik de functie "includeJS" aanpas en na de laatste regel ("nodeHead.appendChild(element);") binnen die functie de code "window.alert('');" toevoeg werkt het wel. Ik krijg dan de inhoud van de TestClass op mijn scherm ge-alert.
JavaScript:
1
2
3
4
5
6
| function test() { includeJS('/static/javascript/TestClass.js'); window.alert(TestClass); } |
Waar het precies aan ligt weet ik niet, maar ik denk dat de toegevoegde window.alert aan de IncludeJS functie ervoor zorgt dat er een delay is en de browser zo de tijd krijgt om het JavaScript in te laden. Kan iemand dit bevestigen en als dit inderdaad het probleem is, hoe kan ik dit dan het beste oplossen? Een setTimeout gebruiken naar een functie die controleert of de klasse bestaat zou dan een optie kunnen zijn, maar er moet een betere manier zijn. Een while loop die constant checkt of de klasse bestaat is erg CPU intensief, dus dat is niet echt een optie.
Het probleem is niet browser specifiek en de gebruikte code is volgens JSLint ook correct. "document.createElement('script')" vervangen door een "document.write" regel om zo een script tag in de body van de pagina te schrijven lost het probleem ook niet op.
Hopelijk kan iemand mij advies geven. Bedankt voor elke reactie
.
[ Voor 0% gewijzigd door Verwijderd op 19-01-2010 14:01 . Reden: typo ]
:strip_icc():strip_exif()/u/12461/crop65b195553d948.jpg?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
Heb je ook een stuk zekerheid dat de JS geladen wordt, zoals Crisp al aangeeft.
:strip_exif()/u/76744/80668.gif?f=community)
:strip_icc():strip_exif()/u/111840/images.jpg?f=community)
