Как загрузить внешний файл Javascript во время события «onclick»?

Question

У меня 2 divs в моем HTML.

<div id="div1"></div> 
<div id="div2"></div> 

При нажатии на «div2» Я хочу, чтобы загрузить внешний файл Javascript сказать, например, «https://abcapis.com/sample.js».

Я попытался включая файл JS на OnClick событие, как показано ниже,

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

Это включает тег сценария в головной части, но не сработал, так как тег скрипт будет загружен на странице загрузки только (поправьте меня здесь, если я ошибаюсь).

Есть ли другой способ, которым я мог продолжить.

Спасибо заранее.

Answer 1

Использование функции jQuery $ .getScript() должно выполнять эту работу за вас.

http://api.jquery.com/jQuery.getScript/

Вот кусочек образца кода:

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
}); 

Если вы не используете JQuery, вы будете иметь, чтобы узнать, как использовать AJAX для динамической загрузки нового сценария в ваш стр.

Answer 2

Ваш код почти работает. Вам нужно использовать .setAttribute. Вот мой рабочий код. Я использовал jQuery в качестве своего сценария:

var script = document.createElement('script'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', 'jquery.min.js'); 
document.head.appendChild(script); 

И это будет сделано.

EDIT:

Дополнительная информация. Когда вы делаете что-то вроде script.type = 'text/javascript', вы устанавливаете свойство объекта, но это не обязательно то же самое, что связать это свойство с фактическим атрибутом узла.

Answer 3

Вы используете jQuery? Если это так, вы можете попробовать $.getScript().

Возможно, вы также захотите проверить это answer. Но в принципе, вы можете сделать что-то вроде этого:

<a href='linkhref.html' id='mylink'>click me</a> 
<script type="text/javascript"> 
    var myLink = document.getElementById('mylink'); 

    myLink.onclick = function(){ 

     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "Public/Scripts/filename.js."; 
     document.getElementsByTagName("head")[0].appendChild(script); 
     return false; 
    } 
</script> 

Answer 4

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
}); 

В информационном я пропустил был, что путь должен быть абсолютным.