如何在按钮单击时附加和运行脚本 [JAVASCRIPT]

Question

我需要一些帮助。

每次用户单击按钮时，我都需要附加并运行 JS 脚本。 我需要评估一些条件来加载和运行脚本的问题...

我拥有的：

var loadScriptBtn = document.getElementById("loadScript");
loadScriptBtn.onclick = loadScript()

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function loadScript() {
  if (getCookie('cookieAccepted')) {
    var serverScript = document.createElement("script");
    serverScript.type = "text/javascript";
    serverScript.src = "http://example.com/myscript";
    document.head.appendChild(serverScript);
  } else {
    alert('Please enable cookies')
  }
}

该脚本已正确附加到正文中，但未执行，我需要它来执行...

我查看了其他问题，但找不到使用 JavaScript 的解决方案，我无法在此问题上使用 Jquery，

谢谢大家的时间！

Answer 1

尝试创建一个新 div，设置其 innerHTML，然后将这个新 div 添加到 DOM。 就像是：

function loadScript() {
  if (getCookie('cookieAccepted')) {
    var serverScript = document.createElement("script");
    serverScript.type = "text/javascript";
    serverScript.src = "http://example.com/myscript";

    var newdiv = document.createElement('div');
    newdiv.innerHTML = serverScript;
    document.getElementById('target').appendChild(newdiv); //<-- lets say that you have a div called target in your html (<div id="target"></div>)
  } else {
    alert('Please enable cookies')
  }
}

Answer 2

目前，您正在为onclick分配一个字符串。 您想为该函数分配一个引用：

loadScriptBtn.onclick = loadScript;

Answer 3

您可以使用 Jquery.getScript 正确加载脚本文件

$("button").click(function(){
  $.getScript("http://example.com/myscript");
});

https://www.w3schools.com/jquery/ajax_getscript.asp

或者你可以使用纯 javascript 来做到这一点，如下所示：

 //I added momentjs after page load. function loadFile() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var s = document.createElement("script") s.innerText = this.responseText;//create script and append innerText document.head.appendChild(s);//add script element to head var test = moment('2016-01-01'); //test inserted js file. console.log(test); } }; xhttp.open("GET", "https://momentjs.com/downloads/moment.min.js", true); xhttp.send();//get url content }

 <div id="demo"> <button type="button" onclick="loadFile()">Load Script</button> </div>