如何让 filepicker 和turbolinks 很好地协同工作？

我使用 Rails 3.2、turbolinks 和 Filepicker.io 开发一个 Web 应用程序

我像这样加载 API 密钥（coffeescript）。我认为$(document).ready就足够了，因为文件选择器脚本在第一个请求时加载一次。

$(document).ready ->
  filepicker.setKey "MY_KEY"

我使用以下内容（coffeescript）加载 Filepicker。 我应该注意的是我使用jquery-turbolinksgem，它将对 Turbolinks 的支持直接构建到 jquery 中。

jQuery ->
  $("#publications_bulk-new #upload-button").on "click", ->
    form = $(this).closest('form')
    filepicker.pickAndStore

当我直接访问该页面时，文件选择器按预期工作。 但是，当我使用 Turbolink 请求访问该页面时，我无法上传任何文件。

我可以打开表单、在 Dropbox 中浏览等。 但在上传时，我看到以下红色错误消息：

Cannot send results to the applicaiton. Sorry about this, it's our fault. Please close this window and try again.

再试一次也没有帮助。

我检查了 Chrome 28.0 的控制台是否有任何错误消息，发现了以下内容：

Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "http://placeholder.library.dev".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
 main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function) main.js:7

Uncaught Communication iframe not found main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function)

2013-07-29 更新“协议、域和端口必须匹配”

我将当前代码推送到我的生产环境，因为消息表明这取决于我的（开发）页面缺少 SSL 加密。

不幸的是，这不是唯一的问题

Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "https://jkreutz.mylibrar.io". Protocols, domains, and ports must match. main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function) main.js:7
Uncaught Communication iframe not found main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function)

TL;DR - 解决方法：在正文中使用传统的 javascript 文件包含，并在调用时要小心filepicker.setKey(...).

我正在使用启用了 Turbolinks 的 Rails 4 应用程序，当通过 Turbolinks 加载第二次（或更多次）包含文件选择器的页面时，我在使用 Filepicker 时遇到了类似的问题。我尝试过传统的 js 和异步的 js，每种都有自己的破解方式。

当使用“高级”（异步js）方法时，失败是令人讨厌的消息：

无法将结果发送到应用程序。抱歉，这是我们的 过错。请关闭此窗口并重试。

和 javascript 控制台错误Blocked a frame with origin ... and Uncaught Communication iframe not found（在 Chrome 中）。

我很确定这是由于第一次加载时由 js 添加到正文的 iframe 在页面正文更改（通过 Turbolinks）时被破坏，并且在第二次 Turbolinks 页面加载时不再添加。

使用传统的 js 方法，事情的顺序非常挑剔。如果我只是在页面上包含传统的js，然后filepicker.setKey(...)之后在页面上，第二个页面加载结果Uncaught FilepickerException: API Key not found。但是，如果我确定要打电话.setKey()后来（就像调用选择器时），它似乎起作用了。 （页面上似乎是用传统的js方法再次创建了通信iframe。）

我已经就此问题写信给 Filepicker 支持人员，希望他们能够为此提供推荐/记录的方法（因为他们似乎热衷于 Rails...）。