Question

我正在使用Google API，根据他们的链接，我必须将以下脚本放在HTML文件中

<script src="https://apis.google.com/js/client.js?onload=callback"></script>

成功加载client.js后正在加载自定义回调函数。

function callback() {
  var ROOT = 'https://your_app_id.appspot.com/_ah/api';
  gapi.client.load('your_api_name', 'v1', function() {
    doSomethingAfterLoading();
  }, ROOT);
}

我想

使用JS文件分隔HTML
我下载了client.js文件并将其放入我的本地仓库。但是为了减少Web请求，我想将client.js与其他JS文件连接起来。但是我不知道如何使用连接的JS文件加载内容并调用回调

提前致谢

Answer 1

如果您正在寻找仅限javascript的解决方案：

var sScriptSrc = "https://apis.google.com/js/client.js?onload=callback"
loadScript(sScriptSrc);

function loadScript(sScriptSrc) {
    var oHead = document.getElementsByTagName("HEAD")[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    oHead.appendChild(oScript);
    oScript.onload = loadedCallback();
}

function loadedCallback() {
    alert("WoHooo I am loaded");
}

看到它在这里运行：JSFiddle

修改

如果我理解你想要实现的目标，让我做一些改进：

我制作了一个简单的主HTML页面：

<html> <head> <script src="client.js"></script> </head> <body> PAGE BODY </body> </html>

正在加载client.js

client.js包含：

// you can call this function with // param1: src of the script to load // param2: function name to be executed once the load is finished function loadScript(sScriptSrc, loadedCallback) { var oHead = document.getElementsByTagName("HEAD")[0]; var oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = sScriptSrc; oHead.appendChild(oScript); oScript.onload = loadedCallback; } // let's load the Google API js and run function GoggleApiLoaded once it is done. loadScript("https://apis.google.com/js/client.js", GoggleApiLoaded); function GoggleApiLoaded() { alert("WoHooo Google API js loaded"); }

当然，代替GoggleApiLoaded示例函数，你可以运行一个方法来开始加载不同的js，并且那个的回调可以加载下一个，依此类推......

这是你在找什么？

Answer 2

jQuery有一个很好的方法。 https://api.jquery.com/jquery.getscript/

jQuery.getScript("https://apis.google.com/js/client.js", function() {
        console.log("hello");
    })

Answer 3

如果你想与IE兼容，包括IE 9，你可以使用这个async JS文件加载器＆amp;回调：

function loadAsync(src, callback){
    var script = document.createElement('script');
    script.src = src; 
    script.type = 'text/javascript';
    script.async = true;
    if(callback != null){
        if (script.readyState) { // IE, incl. IE9
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = function() { // Other browsers
                callback();
            };
        }
    }
    a=document.getElementsByTagName('script')[0];
    a.parentNode.insertBefore(script,a);
}

loadAsync("https://www.example.com/script.js", callbackFunction);

function callbackFunction() {
    console.log('Callback function run');
}

如何使用回调函数导入外部JS？

3 个答案: