Question

我有一个很长的脚本webpack输出，可以称之为bla.js
在我的主要html文件中，我尝试单击按钮时打开bla.js。这就是我试图做到的方式：

<body>                    
    <button class="btn-start" type="button" onclick="clickHandler()"></button>            
    <script>
        function clickHandler(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "scrs/bla.js";
            document.head.appendChild(script);
        }
    </script>
</body>

但是在按钮上单击没有任何反应，尽管在google chrome开发人员工具的“应用程序”标签中，我看到bla.js脚本已添加！

当我这样做时：

<body>                    
    <button class="btn-start" type="button" onclick="window.location.href='run_bla.html';">
    </button>            
</body>

和run_bla.html中的

：

<body>                    
    <script src='scrs/bla.js'></script>     
</body>

它工作得很好！唯一的问题是第二种方法是在URL末尾添加一个/run_bla.html，但我不希望这样。

那么第一种方法有什么问题？如何在不更改网站网址的情况下打开脚本？知道是什么问题吗？我坚持了一段时间...

Answer 1

您已经创建了脚本对象（存储在script变量中），但是尚未将其添加到文档中。

您可以使用元素中的appendChild函数将其添加到HTML元素中，例如：

function clickHandler(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "scrs/bla.js";
    document.head.appendChild(script);
}

这会将脚本附加到文档中的标记。

Answer 2

您的代码很好，因此您的bla.js脚本可能有一个错误，使您无法看到预期的行为。

您可以在以下代码中看到：jQuery库是动态加载的，也可以执行（即已定义）。

function loadJQuery(){
  console.log("clickHandler called");
  console.log(typeof $ !== 'undefined'); // false
  
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://code.jquery.com/jquery-3.3.1.min.js";
  script.onload = function() {
    script.onload = null;
    onJQueryLoad();
  }
  document.head.appendChild(script);
}

function onJQueryLoad() {
	console.log("onScriptLoad called");
  console.log(typeof $ !== 'undefined'); // true
}

<button id="btn" class="btn-start" type="button" onclick="loadJQuery()">click me</button>

单击按钮无法打开脚本

2 个答案: