时间戳

首页 > 解决方案 > 如果 src 是变量，函数不起作用？

javascript - 如果 src 是变量，函数不起作用？

问题描述

使用此 HTML，myFunc()可以执行该功能。https://myurl.de/myjs.js里面有这个功能myFunc。

<head>
 <script type="text/javascript" src="https://myurl.de/myjs.js"></script>
 <body>
  <script type="text/javascript">
   myFunc();
  </script>
 </body>
</head>

但是对于第二个 HTML，我得到一个错误：Uncaught ReferenceError: myFunc is not defined。

https://myurl.de/settingsFile.js是一个在 a 中包含这个 url 的文件var：https://myurl.de/myjs.js所以基本上SettingsFile.UrlToMyJS就是这个https://myurl.de/myjs.js

<head>
 <script src="https://myurl.de/settingsFile.js"></script>
 <script type="text/javascript" id="myid"></script>
</head>
 <body>
  <script type="text/javascript">
   document.getElementById('myid').src = SettingsFile.UrlToMyJS;
   myFunc();
  </script>
 </body>

当我console.log(document.getElementById('myid'))这是输出时：

<script type="text/javascript" id="myid" src="https://myurl.de/myjs.js></script>哪个是对的。它看起来与第一个 html 头部中的脚本完全相同（不同之处在于它具有id="myid"）。

然而它不起作用。为什么以及如何解决？

设置文件.js：

var defaultURL = 'https://myurl.de/';
var SettingsFile = {
UrlToMyJS : defaultURL + 'myjs.js',
}

标签： javascripthtml

解决方案

它不起作用的原因是您不能将 a 添加src到DOM 中已经script存在的元素中——或者更确切地说，这样做不会做任何事情。该元素已被处理。script

相反，创建它然后附加它：

var script = document.createElement("script");
script.onload = function() {
    myFunc();
};
script.src = SettingsFile.UrlToMyJS;
document.head.appendChild(script);
// If you need to support IE8, use the following instead of the previous line:
//document.getElementsByTagName("head")[0].appendChild(script);

等待脚本加载，然后调用myFunc（那时应该存在）。

另请注意，正如我和杰里米在评论中指出的那样，body不要进去， head它会继续。通常最好将script标签放在末尾body（如果您没有在它们上使用async或defer属性或type="module"）。总而言之，类似：

<head>
    <!-- head stuff here -->
</head>
<body>
    <!-- content here -->
    <script src="https://myurl.de/settingsFile.js"></script>
    <script type="text/javascript">
    var script = document.createElement("script");
    script.onload = function() {
        myFunc();
    };
    script.src = SettingsFile.UrlToMyJS;
    document.head.appendChild(script);
    // If you need to support IE8, use the following instead of the previous line:
    //document.getElementsByTagName("head")[0].appendChild(script);
    </script>
</body>

另一种选择是使用document.write. 这种事情可能是document.write页面主要解析期间最后一次至少部分适当的使用：

<head>
    <!-- head stuff here -->
</head>
<body>
    <!-- content here -->
    <script src="https://myurl.de/settingsFile.js"></script>
    <script type="text/javascript">
    document.write('<script src="' + SettingsFile.UrlToMyJS + '"><\/script>');
    </script>
    <script>
    myFunc();
    </script>
</body>

推荐阅读