javascript - API回调

Question

我在 http://foobar.com/api?callback=mycallback 上有以下脚本:

var something = 'aaa';
var callback = mycallback;
(function() {
   var output = eval(something);
   callback(output);
});

我想从我自己的脚本访问这个脚本，并获取输出。所以我正在做以下事情:

var module1 = (function() {
   var getFromApi = function(output) {
      return (function(output) {
         var script = document.createElement('script');
         script.setAttribute('src', 'http://foobar.com/api?callback=mycallback');
         document.getElementsByTagName('head')[0].appendChild(script);
      });
   };
   var fetch = function() {
      getFromApi(function(output) {
         console.log(output);
      });
   };
   return {
      fetch: fetch
   };
})();

module1.fetch();

结果应该是这个脚本的输出，但事实并非如此，它甚至没有进入回调。我怎样才能正确地做到这一点？

Answer 1

模块1存在一些问题:

• getFromApi 返回一个函数(我们称之为 fn)
• fn 有一个名为 output 的参数，它隐藏了外部函数的参数，使得传递给 getFromApi 的参数无用
• fetch 调用 getFromApi 并且不执行任何其他操作
• 回调函数必须是全局可访问的

可能的解决方案是:

var module1 = (function() {
var getFromApi = function(output) {
     var script = document.createElement('script');
     script.setAttribute('src', 'http://foobar.com/api?callback='+output);
     document.getElementsByTagName('head')[0].appendChild(script);
};
var fetch = function() {
  getFromApi('myfunction');
};
return {
  fetch: fetch
};
})();
function myfunction(output) {
     console.log(output);
}
module1.fetch();

将函数作为回调的可能的令人讨厌的解决方案(它在 IE 中不起作用，但可以调整)

var module1 = (function() {
  var getFromApi = function(output) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://foobar.com/api?callback=eval(document.currentScript.dataset.fn)');
    script.setAttribute('data-fn', '(function(){ return ' + output +'})()');
    document.getElementsByTagName('head')[0].appendChild(script);
  };
  var fetch = function() {
    return getFromApi(function(output){
      console.log(output);
      /*remember to remove script tag*/
      document.currentScript.remove();
    });
  };
  return {
    fetch: fetch
  };
})();
module1.fetch();