javascript - 从 Safari 扩展创建 JSONP 回调

Question

我正在尝试通过 Safari 扩展从 Reddit 加载一些数据。我正在使用 JSONP 模式创建回调函数并将新的 src 附加到脚本。但是，看起来有两个窗口命名空间，而且我动态创建的函数对于动态添加的脚本的上下文是不可用的。

此链接似乎详细说明了 chrome 的问题，我猜这与我在 Safari 中的问题类似。

JSONP request in chrome extension, callback function doesn't exist?

这是代码(在扩展之外工作):

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        callback(data);
    };
    console.log('about to create script');
    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'jsonp=' + callbackName;
    document.body.appendChild(script);
    console.log('script should be appended');
}


function getImages(){
    jsonp('http://www.reddit.com/r/cats/.json', function(data) {
        data.data.children.forEach(function(el){
            console.log(el.data.url);
        });
    });    
}

有什么想法，解决方法吗？

谢谢!

Answer 1

关于在同一个窗口中有两个命名空间，你是对的。注入(inject)的脚本无法访问网页的全局变量，反之亦然。当您在注入(inject)的脚本中启动 JSONP 时，插入的脚本 <script>标记在网页的命名空间中运行。

我知道有两种方法可以解决 Safari 扩展中的这个限制。

可能更好的方法是使用扩展程序的全局页面通过标准 XHR 或 jQuery Ajax 方法(全局页面脚本支持)与外部 API 通信，并使用 messages将获取的数据传递给注入(inject)的脚本。

另一种方法是继续使用注入(inject)脚本中的 JSONP，但让 JSONP 回调函数将获取的数据添加到页面的 DOM，注入(inject)脚本可以访问该页面。例如，您可以将数据放在隐藏的 <pre> 中。元素，然后使用元素的 innerHTML属性来检索它。当然，这种技术确实会使内容对页面自己的脚本可见，因此请谨慎行事。