如何导入带有回调函数的外部JS?

2024-03-04

我正在使用 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);
}

我想

  1. 将 HTML 与 JS 文件分开
  2. 我下载了 client.js 文件并将其放入本地存储库中。但为了减少网络请求,我想将 client.js 与其他 JS 文件连接起来。但我不知道如何使用连接的 JS 文件加载内容并调用回调

提前致谢


如果您正在寻找仅 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 https://jsfiddle.net/ddan/24x1jw6d/3/

EDIT

如果我正确理解你想要实现的目标,让我做一些改进:

我做了一个简单的 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,并且该函数的回调可以加载下一个,依此类推...

这是您要找的吗?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何导入带有回调函数的外部JS? 的相关文章

随机推荐