filepicker.io - 如何让 filepicker 和 turbolinks 一起玩得很好？

Question

我使用 Rails 3.2、turbolinks 和 Filepicker.io 开发了一个网络应用

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

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

我使用以下 (coffeescript) 加载 Filepicker。我应该注意，我使用了 jquery-turbolinks gem，它将对 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“协议(protocol)、域和端口必须匹配”

我将当前代码推送到我的生产环境，因为消息表明这取决于我的(开发)页面缺少 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)

Answer 1

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

---

我正在使用启用了 Turbolinks 的 Rails 4 应用程序，当包含 filepicker 的页面通过 turbolinks 加载第二次(或更多次)时，我遇到了与 Filepicker 类似的问题。我已经尝试过传统的和异步的 js，每个都有自己的破解方式。

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

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

Blocked a frame with origin ... 和 Uncaught Communication iframe not found 的 javascript 控制台错误(在 Chrome 中)。

我很确定这是由 iframe 引起的，它在第一次加载时被 js 添加到 body 中，当页面正文被更改(通过 turbolinks)时被破坏并且在第二次 turbolinks 页面加载时再也没有添加.

使用传统的 js 方法，事物的顺序非常挑剔。如果我只是在页面上包含传统的 js，然后在页面上包含 filepicker.setKey(...)，则第二个页面加载会导致 Uncaught FilepickerException: API Key not发现。但是，如果我确定稍后调用 .setKey()(例如调用选择器时)，它似乎可以工作。 (通讯iframe好像是用传统的js方式在页面上重新创建的。)

我已经就此写信给 Filepicker 支持，并希望为此提出推荐/记录的方法(因为他们似乎热衷于 Rails...)。