代码之家 › 专栏 › 技术社区 › Wais Kamal

页面加载完成后,如何加载新脚本?

javascript

Wais Kamal · 技术社区 · 5 年前

我有两个单独的脚本文件(script1.js、script2.js)。每个文件都有自己定义的函数/变量。为了简单起见,我假设每个文件都包含一个单独的变量。所以这些文件看起来像:

script1.js

var x = 2;

脚本2.js

var y = 2;

index.html

<button onclick="change()">Change script</button>
<script id="file" src="script1.js"></script>
<script>
  function change() {
    var file = document.getElementById("file");
    if(file.src.slice(-10) == "script1.js") {
      file.src = "script2.js";
    } else {
      file.src = "script1.js";
    }
  }
</script>

但是当我换了房间 src x 有价值 2 虽然 y 没有定义。

页面加载完毕后,如何切换脚本?

3 回复 | 直到 5 年前

Shailesh Saxena 5 年前

不确定您想要完成什么,但就javascript的加载而言,您可以使用:

$("#id_of_button").click(function(){
$.getScript('helloworld.js', function() {
    //do whatever you want to accomplish here....
});

});

here

更好的方法可能是将相关代码保存在同一js文件中的不同函数中,并根据条件检查调用特定函数来覆盖逻辑。虽然我还不清楚你想达到什么目的。我能得到一些基于场景的想法来弄清楚吗?

Pingolin BenJ 5 年前

您可以尝试以下方法: https://codepen.io/anon/pen/mvMZOR

<button type="button">Change script</button>
<script id="file" src="script1.js"></script>

Javascript

var index = 1;
var scriptId = 'file';
var button = document.querySelector('button');

button.addEventListener('click', function() {
  // Remove the old script
  document.getElementById(scriptId).remove();
  // Create the new one
  var s = document.createElement('script');
  // Add the id you want, in this case "file"
  s.id = scriptId;
  // It will return "script1.js" or "script2.js" alternatively
  s.src = 'script' + (index++ % 2 + 1) + '.js'; 
  // Append your new script at the end of your body
  document.querySelector('body').append(s);
});

marc_s Anurag 5 年前

因此,我在这里编写了一个示例,它将替换旧脚本并在相同位置插入新脚本。

  function change() {
    var file = document.getElementById("file"); // get the script you want to change
    var newscript = document.createElement("script"); // create new script
    newscript.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" // set the new script src
    newscript.setAttribute("id","file"); // set the id to the same id as the old script
    newscript.type = 'text/javascript';
    file.parentNode.insertBefore(newscript, file); // insert the new script before the old one
    file.remove() // remove the old script
    
    var callback= function(){ // when the script has been loded then test and see if jQuery is working now
      $("body").append("<p>Jq loaded</p>"); // no error then jQuery has been loaded
    }
    newscript.onreadystatechange = callback;
    newscript.onload = callback;
  
  }

<script id="file" src="script1.js"></script>
<button onclick="change()">Change script</button>