Question

我想加载一个脚本，根据条件加载另一个脚本，这个脚本正在向全局窗口添加一个变量。

<head>
    <script src="load-something.js"></script>
    <script>conosle.log(window.someVariable)</script>
</head>

负载something.js

function loadScript( path ) {
  const head = document.getElementsByTagName('head')[0];
  const script = document.createElement('script');
  script.src = path;
  head.append(script);
}

if(condition) {
  loadScript('pathToJsFile.js');
}

pathToJsFile.js

window.someVariable = ...

我的问题是someVariable未定义。是否可以强制脚本阻止？

Answer 1

这个怎么样？

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
<script>
    var condition = true;
    var data;
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
         data = this.responseText;
        alert(data);
        }
      };
      xhttp.open("GET", "test.json", true);
      xhttp.send();
    }
    if (condition) {
        loadDoc();
    }
</script>
  </head>
  <body>
  </body>
</html>

＆＃13;

Answer 2

您可以使用DOM元素的onload属性，可以找到更简洁的示例here

当然，您不能指望在下一个块中定义“window.someVariable”，您可以在此answer中阅读有关加载/执行订单的内容。

作为解决方案，您可以在“load-something.js”中添加类似“isAllLoadedd”的内容：

let pathsToLoad = [],
    leftToLoad = 0;
function loadScript( path ) {
  let head = document.getElementsByTagName('head')[0];
  let script = document.createElement('script');
  script.src = path;
  script.onload = () => leftToLoad--; 
  head.append(script);
}

if(condition) {
   pathsToLoad.push('pathToJsFile.js')
}
leftToLoad = pathsToLoad.length;
 for (let file of pathsToLoad)
   loadScript(file);

function isAllLoaded() {
   return !!leftToLoad.length;
}

然后在你的块中使用“someVariable”：

 let _int = setInterval(function() {
    if (isAllLoaded()) {
      console.log(someVariable);
      clearInterval(_int);
    } 
}, 100)

但是在你的特殊情况下，你们都可以保持原样，只需在定义后使用你的someVariable :)，但无论如何你都需要等到你的依赖项被加载。

Answer 3

以下是动态添加代码的代码

#linking style sheet

var linkElement=document.createElement('link');
linkElement.href='resources/css/animate.min.css';
linkElement.rel='stylesheet';

# linking script
var scriptElement = document.createElement('script');
scriptElement.src = "resources/js/check_session.js";

# add to head tag -> header
document.getElementsByTagName('head')[0].appendChild(linkElement);
document.getElementsByTagName('head')[0].appendChild(scriptElement);

JS在索引html和块中动态加载脚本

3 个答案: