单击按钮时无法打开脚本答案

【问题标题】：can't open a script on button click单击按钮时无法打开脚本
【发布时间】：2018-10-04 22:11:03
【问题描述】：

我有一个很长的 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>

但是在点击按钮时没有任何反应，尽管在谷歌浏览器开发者工具的应用程序选项卡中我可以看到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>

它工作得很好！唯一的问题是在第二种方式中，网址末尾会有一个/run_bla.html，我不希望这样。

那么第一种方法有什么问题呢？如何在不更改网站 url 的情况下打开脚本？知道有什么问题吗？我被这个卡住了一段时间......

【问题讨论】：

我的回答对您解决问题有帮助吗？如果是，请将其标记为已接受。如果没有，请告诉我，我会尽力提供帮助。
@HeyJude 并没有完全解决它，但帮助我解决了它，非常感谢。
当时是什么？

标签： javascript html webpack

【解决方案1】：

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

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

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

这会将您的脚本附加到文档中的

标记中。

【讨论】：

哦，对不起，我的代码中已经有了appendChild()，我只是忘了把它放在我的问题中。对不起。编辑
没问题。对不起，我已经用appendChild 测试了脚本，它运行良好，所以我没有更多的线索。我不知道编译后 Webpack 有什么不同，因为它仍然只是 Javascript 并且 Webpack 不依赖于“onload”，例如（除非你有使用“onload”的东西）。我也用 Webpack 生成的代码进行了测试，它工作正常。

【解决方案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
}

&lt;button id="btn" class="btn-start" type="button" onclick="loadJQuery()"&gt;click me&lt;/button&gt;

【讨论】：