Question

我写了一个Foo构造函数，它有一个load函数用于上传JSONP。 script.src有回调，但我收到了错误：Uncaught ReferenceError: bar is not defined。我怎么解决它？

function Foo(params) { 
    function bar(response) {
        console.log(response);
    }

    function load() {
        var script = document.createElement('script');
        script.src = Config.apiUrl + '&callback=bar';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    document.getElementById('button').addEventListener('click', load, false);
}

用法：

var foo = new Foo(params);

页面中可以有很多。

Answer 1

假设你的JSONP响应是正确的，看起来像这样：

bar(/*some argument*/);

问题：bar必须是全局可访问的，但目前它不是（它只在Foo中可见）

可能的解决方法：

将bar定义为Foo的方法，然后您就可以执行它（只要实例foo是全局可访问的）。在这种情况下，callback - 参数必须设置为foo.bar：


function Foo(params) {

  this.bar=function(response) {
        console.log(response);
    }

  this.load=function(){
        var script = document.createElement('script');
        script.src = Config.apiUrl + '&callback=foo.bar';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    document.getElementById('button').addEventListener('click', this.load, false);
}

//assuming you create the instance in global scope
var foo = new Foo(params);

Answer 2

简答：

您应该在全局范围内提供bar功能，或将其作为Foo实例的公共方法，该方法应该可在全球范围内使用。

由于您有错误，您知道需要一个返回有效javascript代码字符串的服务器，如：

alert('JSONP in action'); bar('result');

在您的/?callback=bar请求中。

因此，由于JSONP只是页面上的一个异常脚本加载，它与您在html的head部分中加载的任何其他.js文件具有相同的变量可访问性规则，显然，您可以'从不同的.js文件访问“私人函数”。

但是“保存条形函数参考以供以后使用”功能呢？（封闭件）？

你可能会问

这里不适用，因为bar函数调用的范围是从Foo构造函数外部创建的 - bar函数是从“不同文件”调用的，所以这里没有闭包。

更好的解决方案：

假设您需要发出Cross Origin请求（CORS）并且您可以在服务器端应用中进行更改，最好在您尝试从不同的服务器上设置Access-Control-Allow-Origin规则域名应用。这将允许您使用常见的XHR请求，并获得有关http状态代码的更多信息或发送自定义的不同请求。

JSONP回调不起作用

2 个答案: