Question

我使用rails 3.2，turbolinks和Filepicker.io

开发了一个Web应用程序

我喜欢这样的API密钥（coffeescript）。我认为$(document).ready就足够了，因为filepicker脚本会在第一次请求时加载一次。

$(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

当我直接访问该页面时，filepicker按预期工作。但是，当我使用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)

Answer 1

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

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

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

无法将结果发送到应用程序。对不起，这是我们的故障。请关闭此窗口，然后重试。

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

我很确定这是由于js在第一次加载时被添加到主体中的iframe在页面体被更改时被修改（通过turbolinks）并且从未在第二个turbolinks页面加载时再次添加

采用传统的js方法，事物的顺序非常挑剔。如果我只是在页面上包含传统的js，然后在页面上包含filepicker.setKey(...)，则第二页加载会产生Uncaught FilepickerException: API Key not found。但是，如果我确定稍后调用.setKey()（就像调用选择器时那样），它似乎有效。（通信iframe似乎在使用传统js方法的页面上再次创建。）

我已经写过关于这个的Filepicker支持，并希望推出一个推荐/记录的方法（因为他们似乎热衷于轨道......）。

Answer 2

我无法得到斯托沃的工作答案。我认为可能在通信iframe上使用data-turbolinks-permanent可行，但唉Turbolinks希望传入的页面主体也有iframe元素。

我们最终使用的解决方案是：

// Filepicker.js does not play well with Turbolinks. It needs a communication
// iframe loaded on every page load. Unfortunately there is no accessible API for
// removing Filepicker's iframes. This solution copies the iframes over to the
// incoming body for filepicker to continue using on each new page request.

document.addEventListener("turbolinks:before-render", function(event) {
  event.data.newBody.appendChild(document.querySelector('#filepicker_comm_iframe'));
  event.data.newBody.appendChild(document.querySelector('#fpapi_comm_iframe'));
});

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

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

2 个答案: