我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?


当前回答

但是,如果您需要从远程来源下载JavaScript,大多数现代浏览器可能会因为CORS或类似的东西阻止您的跨网站请求。

<script src="https://another-domain.com/example.js"></script>

它不会工作. 并做 document.createElement('script').src = '......' 也不会切断它. 相反,你可以做的是通过标准 GET 请求作为资源加载 JavaScript 代码,并这样做:

<script type="text/javascript">
    var script = document.createElement('script');
    script.type = 'text/javascript';

    let xhr = new XMLHttpRequest();
    xhr.open("GET", 'https://raw.githubusercontent.com/Torxed/slimWebSocket/master/slimWebSocket.js', true);
    xhr.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            script.innerHTML = this.responseText; // <-- This one
            document.head.appendChild(script);
        }
    }
    xhr.send();
</script>

通过自己抓住内容,浏览器不会注意到恶意的意图,并允许你去做请求. 然后你添加它在 <script> 的内部HTML 而不是. 这仍然会导致浏览器(至少在Chrome中测试) 打破 / 执行脚本。

再一次,这是一个边缘案例使用案例. 您将没有背面兼容性或浏览器兼容性可能. 但有趣/有用的事情要知道。

其他回答

您只能使用要求();标签。

例如,如果我有一个 addition.js 模块,我想添加到 math.js,我会这样做:

//this is math.js

//vars
let a = 1;
let b = 3;

//start of code
const additionfile = require('addition.js');
window.alert("You added " + a + " and " + b + " together, to get " + additionfile.add(a,b) + "!");

如果你想要添加.js 文件,它会看起来像这样的东西

function add(a,b) {
   const sum = a + b;
   return sum;
}

请注意,我们通常使用静态脚本,所以我们希望尽可能多地从缓存中获取。

这节省了网络流量,加速着陆。

使用

$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

存储:真实的选项已添加到 Ajax 方法。

我的常见方法是:

var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

我尝试过AJAX方法(其他答案之一),但它似乎对我来说并不那么好。

这里解释了代码如何为那些有趣的人工作:基本上,它创建了一个新的脚本标签(之后的第一个)的URL. 它将其设置为无同步模式,所以它不会阻止其余的代码,但在准备状态(需要加载的内容的状态)变更为“加载”时召回。

也许这里还有另一种方式!

在 Node.js 中,你可以这样做,就像下面的代码一样!

主持人JS

    module.exports = {
      log: function(string) {
        if(console) console.log(string);
      }
      mylog: function(){
        console.log('just for log test!');
      }
    }

主.js

    const mylog = require('./sub');

    mylog.log('Hurray, it works! :)');
    mylog.mylog();

雷夫斯

HTTP://requirejs.org/docs/node.html

也许你可以使用我在此页面上发现的这个功能 如何将JavaScript文件纳入JavaScript文件中?

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}