Почему document.write не дожидаясь загрузки?

Question

В принципе у меня есть в моем вебсайте script.js, что делает это:

if (someVar){ 
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>'); 
} 

Теперь я хотел бы атаковать некоторое поведение:

if (someVar){ 
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>'); 

    $(document).ready(function(){ 
    //> Do stuff 
    }); 
} 

Но я получил необъявленную функцию $ в консоли

Answer 1

document.write записывает заданную строку после вызова скрипта. Если вы хотите привязать к $(document).ready(), вы можете переместить эту часть кода в отдельный файл, который включен в fter файл с функцией document.write.

Answer 2

document.write не осведомлен о содержании; то есть, если вы используете его для добавления элемента <script> на страницу, он не будет ждать, пока содержимое этого элемента будет загружено и выполнено до продолжения.

Если вы хотите, чтобы динамически загружать библиотеку JavaScript с обратным вызовом, то я предлагаю использовать Request.js или аналогичную библиотеку, которая позволит вам достичь своих целей, как это:

require(["jquery"], function($) { 
    $(function() { 
     alert('ready'); 
    }); 
}); 

Answer 3

document.write фактически переписывает источник вашего документа. По этой причине вы НИКОГДА не должны его использовать.

Надлежащим образом прикрепить тег сценария, как это:

jqueryScript = document.createElement('script'); 
jqueryScript.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); 
document.body.appendChild(jqueryScript); 
//do your jquery stuff 

Больше чтения о том, почему вы никогда не должны использовать document.write: Why is document.write considered a "bad practice"?

Answer 4

Внешний скрипт не блокирует код, JQuery не доступен немедленно. Вам необходимо сделать это:

<script> 
if (someVar){ 
   document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>'); 
} 
</script> 
<script> 
If (someVar){ 
  $(document).ready(function(){ 
     //> Do stuff 
  }); 
} 
</script>