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


当前回答

您将使用此:

<script src="your_file.js"></script>

轻松!

其他回答

如果你想要一个单一的链接到所有的JavaScript功能,它们位于不同的文件,你可以做这样的事情,使用PHP:

创建一个 php 文件,将存储所有的 javascript 功能/triggers javascript.php 并确保它是一个.php 文件:

在你的“头”部分

 <script src="/directory/javascript.php"></script>

在您的 javascript.php 中,创建一个包含内容类型的应用程序/javascript 标题,并使用 php glob 包含所有 javascript 文件/脚本如下:

饰 JavaScript.php

<?php 
header("content-type:application/javascript");
foreach(glob("/functions/*.js") as $filename){include($filename);}
?> 

现在,你可以创建单独的JavaScript文件并将其添加到你的 / 功能文件夹,或者你可以称之为什么。

下面是没有jQuery的同步版本:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

请注意,为了获得此工作跨域,服务器将需要在其响应中设置允许起源标题。

如果您正在使用 Web 工作者,并希望在工作者的范围内添加额外的脚本,则其他关于添加脚本到标签标签等的答案不会为您工作。

幸运的是,网页工作者有自己的 importScripts 功能,这是在网页工作者的范围内的全球功能,原生于浏览器本身,因为它是规格的一部分。

否则,因为第二个最高的投票答案突出你的问题,RequireJS也可以处理包括在WebWorker内部的脚本(可能称之为ImportScripts本身,但有几个其他有用的功能)。

如果你想要它在纯粹的JavaScript,你可以使用document.write。

document.write('<script src="myscript.js" type="text/javascript"></script>');

如果您使用 jQuery 图书馆,您可以使用 $.getScript 方法。

$.getScript("another_script.js");

在现代语言中,如果脚本已经加载了,则会:

function loadJs( url ){
  return new Promise(( resolve, reject ) => {
    if (document.querySelector( `head > script[ src = "${url}" ]`) !== null ){
        console.warn( `script already loaded: ${url}` );
        resolve();
    }
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    script.onerror = function( reason ){
        // This can be useful for your error-handling code
        reason.message = `error trying to load script ${url}`;
        reject( reason );
    };
    document.head.appendChild( script );
  });
}

使用(async/await):

try { await loadJs("https://.../script.js"); }
catch(error) { console.log(error); }

await loadJs( "https://.../script.js" ).catch( err => {} );

使用(承诺):

loadJs( "https://.../script.js" ).then( res => {} ).catch( err => {} );