document.write, проблема с загрузкой и переменной областью

Question

Я изо всех сил пытаюсь изо дня в день работать с document.write и функцией onLoad.

Если вы считаете, код JS, как этот =>

window.i = 0; 
console.log(i + " //should be 0"); 

document.write("<scr"+"ipt onLoad='onA1Ready()' src='a1.js'><\/sc"+"ript>"); 

function onA1Ready(){ 
    document.write("<scr"+"ipt onLoad='onA2Ready()' src='a2.js'><\/sc"+"ript>"); 
} 

function onA2Ready(){ 
    console.log(i + " //should be 2"); 
} 

и a1.js неоспоримым, как это =>

i++; 
console.log(i + " //should be 1"); 

и a2.js неоспоримым очень похож =>

i++; 
console.log(i + " //should be 2"); 

Я ожидаю, что последний выход консоли будет равен 2, но вместо этого вот что я выхожу из консоли =>

0 //should be 0  test.js (line 2) 
1 //should be 1  a1.js (line 2) 
i is not defined ERROR i++; a2.js (line 1) 
onA2Ready is not defined 

Я думаю, эта проблема связана с областью, но я не могу понять, как.

Было бы здорово, если бы у кого-то из вас была идея о том, что здесь происходит.

Answer 1

Я тестировал на Chrome 16, и все шло так, как ожидалось. Однако в последнем FF я получил описанную вами ошибку.

Мой совет: прекратить использование злаdocument.write() для динамической загрузки скриптов. Вместо этого используйте методы DOM. Я написал небольшую функцию myLoader(), что может помочь вам

window.i = 0; 
console.log(i + " //should be 0"); 

var myLoader = function(filename, fun) { 
    var head = document.getElementsByTagName('head')[0], 
     script = document.createElement('script'); 
    script.type= 'text/javascript'; 
    script.src = filename; 
    if(typeof fun === 'function'){ script.onload = fun; } 
    head.appendChild(script); 
}; 


myLoader('a1.js', function(){ 
    myLoader('a2.js', function() { 
    console.log(i + " //should be 2"); 
    }); 
}); 

Попробуйте.

Выход я

0 //should be 0   a0.js (line 2) 
1 //should be 1   a1.js (line 2) 
2 //should be 2   a2.js (line 2) 
2 //should be 2   a0.js (line 17) 

Answer 2

Во-первых, я бы настоятельно предложил не использовать document.write. Это грязно и не нужно.

Добавление тега сценария намного лучше обрабатывается как таковой:

var addScriptWithOnLoad = function(src, fn) { 
    var s = document.createElement('script'); 
    s.setAttribute('type', 'text/javascript'); 
    s.setAttribute('src', src); 
    s.onload = fn; 
    document.head.appendChild(s); 
}; 

Далее вы действительно не должны использовать глобальный масштаб, как это, вы полагаетесь на браузер играет хорошо, который никогда не является безопасным делать ставку. Вы должны скорее передавать данные между функциями. Это, однако, немного выходит за рамки этого ответа.

следующий тег сценария, помещенной в главе web page, производит ваш предполагаемый результат

<script type="text/javascript"> 
    window.i = 0; 
    var addJS = function(src, fn) { 
     var s = document.createElement('script'); 
     s.setAttribute('src', src); 
     s.setAttribute('type', 'text/javascript'); 
     s.onload = fn; 
     document.head.appendChild(s); 
    }; 

    console.log(i + " //should be 0"); 

    var fn1 = function() { 
     console.log(); 
     addJS('a2.js', fn2); 
    }; 

    var fn2 = function() { 
     console.log(i + " //should be 2"); 
    }; 

    addJS('a1.js', fn1); 
</script> 

Answer 3

Я подозреваю, что onA1Ready() вызывается OnLoad, который пишет другую функцию, вызываемую OnLoad, который никогда не называется документ уже загружен.