3

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

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

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

我使用以下（咖啡脚本）加载 Filepicker。我应该注意到我使用了jquery-turbolinksgem，它在 jquery 中构建了对 turbolinks 的支持。

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)
4

2 回答 2

4

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

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

使用“高级”（异步 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()稍后再调用（例如调用选择器时），它似乎可以工作。（用传统的js方法在页面上好像又创建了通信iframe。）

我已经写信给 Filepicker 支持，并希望为此提供推荐/记录的方法（因为他们似乎热衷于 rails ......）。

于 2013-08-09T08:34:21.793 回答
1

我无法得到 stevo 的工作答案。我认为也许data-turbolinks-permanent在通信 iframe 上使用会起作用，但可惜 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'));
});
于 2017-04-12T00:10:36.407 回答