来自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

module1中存在一些问题：

• getFromApi返回一个函数（让我们称之为fn）
• fn有一个名为output的参数，它隐藏了外部函数的参数，使得参数传递给getFromApi无用
• 获取调用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();