topic

*.JS when to be loaded you think?

Abstrakt

In clause{article} the problem of sequence of loading of internal and external JS-scripts in dynamically created HTML-pages is considered{examined}. Everything about what there is a speech, concerns only Internet Explorer v5 and is higher (IE4 did not try).

Introdjukshn

Somehow I once did{made} such feature: on open HTML-page in a browser in field TEXTAREA I enter commands, I press the button - the JS-script processes these commands, forms on them a code and creates a new window in which this code writes down. In the new document the line, connecting an external script - <script src = "tools.js"> - for access to service functions without fail entered the name.

When I began to debug this business, one unexpected trouble was found out: something was not so with a script loaded from a file tools.js. As appeared subsequently, business was not in a code of a script, and that he was external.

Essence of a problem

So, that I have found out. Let there is a code:

<html>

<head>

---script code---

</script>

---script code---

</script>

</head>

<body>

---script code---

</script>

</body>

</html>

If this HTML-code is loaded from a file, the order of loading of scripts natural: S1 - S2 - S3 - S4. If it to write down with the help newWin.document.write in the created window newWin, the order of loading of scripts already another: S1 - S3 - S4 - S2 (!) I.e. the order was saved if to forget about an external script. In the given example this script is placed inside <head>, but it is not essential, since in <body> varies nothing.

The following example is called to show the described change about loading scripts.

External script example.js:

function demo () {

alert (" example.js:demo () - I am accessible ");

}

Test page:

<html>

<head>

<title> the Example 1. </title>

code = " <html> \n\

<head> \n\

<title> the Example 1. dynamically created document. </title> \n\

window.onerror = myerror; \n\

\n\

function myerror (msg, url, line) {\n\

alert (' Generitsja the mistake \\ n \ " ' + msg + ' \ " \\ nv to a line ' +line + ' \\ nLegko to be convinced, \\ n\

That this line there is a call demo () '); \n\

return true; \n\

} \n\

<"+"/script> \n\

</head> \n\

<body> \n\

<span id = \ " ilnb \ "> we Check availability </span> <br> \n\

demo (); \n\

<"+"/script> \n\

document.all.ilnb.innerHTML + = ' - it is executed '; \n\

<"+"/script> \n\

Press the button \ " To update \ ", and the mistake will not appear, since the document already statichen\n\

</body> \n\

</html> ";

function test () {

w = window.open ();

w.document.write (code);

}

</script>

</head>

<body>

<span id = "ilnb"> we Check availability </span> <br>

demo ();

document.all.ilnb.innerHTML + = ' - it is executed ';

</script>

<a href = "*" onclick = " test (); return false; "> To create the dynamic document </a>

</body>

</html>

Method of elimination

All is done{made} extremely simply. Let it is necessary to connect a file tools.js. We shall add in his end the instruction is_load = 1. In dynamically created page is higher tega <script src = "tools.js"> we shall write down a script in which also we shall declare a variable is_load = 0. Then is_load it will be equal 0, it will not be loaded yet tools.js when she becomes equal 1. When loading tools.js will prove to be true in the specified image, it will be possible to call a code using contents of this file. This code is specified under a collective name tool (). It are necessary to catch the moment of the termination{ending} of loading only. For this purpose we use the timer.

Let's write down that progovoreno words, as a code:

is_load = 0;

time_ = 100;

function if_load () {

if (is_load == 0)

setTimeout (' if_load (); ', time _);

else

tool ();

}

setTimeout (' if_load (); ', time _);

</script>

I pay special attention to accommodation of an auxiliary script before external. The order of following appears essential if dynamically created page is updated. Then she already is static, and scripts gruzjatsja by way of occurrence in a code. Rearrangement of auxiliary and external scripts would lead to to that the external script all over again would be loaded - thus would be is_load = 1 - then the instruction is_load = 0 would be loaded, that would lead to to incessant calls of function if_load ().

Example of realization.

External script tools.js:

function tool () {

alert (" tools.js:tool () - I was already loaded ");

}

is_load = 1;

Test page:

<html>

<head>

<title> the Example 2. </title>

is_load = 0;

time_ = 100;

function if_load () {

if (is_load == 0)

setTimeout (' if_load (); ', time _);

else {

tool ();

document.all.ilnb.innerHTML + = ' - it is executed ';

}

setTimeout (' if_load (); ', time _);

</script>

code = " <html> \n\

<head> \n\

<title> the Example 2. dynamically created document </title> \n\

is_load = 0; \n\

time_ = 100; \n\

\n\

function if_load () {\n\

if (is_load == 0) \n\

setTimeout (' if_load (); ', time _);\n\

else {\n\

tool (); \n\

document.all.ilnb.innerHTML + = ' - it is executed '; \n\

} \n\

\n\

setTimeout (' if_load (); ', time _);\n\

<"+"/script> \n\

</head> \n\

<body> \n\

<span id = \ " ilnb \ "> we Check availability </span> <br> \n\

Press the button \ " To update \ ", and loading will be defined{determined} correctly, since the order \n\

Followings of auxiliary and external scripts - pravil`nyj\n\

</body> \n\

</html> ";

function test () {

w = window.open ();

w.document.write (code);

}

</script>

</head>

<body>

<span id = "ilnb"> we Check availability </span> <br>

<a href = "*" onclick = " test (); return false; "> To create the dynamic document </a>

</body>

</html>

As we see, all ulazheno, and in dynamically created page function tool () is caused only when she becomes accessible.