Question

目前我的应用程序中存在Filepicker的iframe问题...我的工具：

框架：Rails 4（包括turbolinks）
API：Filepicker.io（JS）
文件类型：Coffeescript

我的示例代码：

ready = ->
filepicker_api_key = $js_data.data('filepickerApiKey')
unprocessed_path = $js_data.data('unprocessedPath')
filepicker.setKey(filepicker_api_key)
  $('#image-upload').click (e) ->

    picker_options =
    services: ['COMPUTER']
    mimetypes: ['image/*']

    store_options =
    location: 's3'
    path: unprocessed_path
    access: 'public'

    filepicker.pickAndStore picker_options, store_options ->
      console.log 'foobar'
      # alot of code comes here.. which works whenever I refresh the page

$(document).ready(ready)
$(document).on('page:load', ready)

我尝试上传内容后停止播放。我的日志显示此错误： Error: Permission denied to access property 'filepicker_comm_iframe'并且未显示我的'foobar'日志

但是当我刷新页面时，我没有收到错误和文件相应上传。我试图避免必须的缺陷刷新页面以便成功上传。

Answer 1

由于使用turbolinks重新加载正文，我建议在布局文件中移动此代码：

<%= filepicker_js_include_tag %>

从<head>到<body>。

它应该可以正常工作（在Rails 4中，不安装'jquery-turbolinks'宝石）。在未来，我们将致力于一般解决方案，独立于此标签的放置位置。

Answer 2

我能够通过将gem 'jquery-turbolinks'添加到我的Gemfile（因此运行包），并将//= jquery.turbolinks包含到我的application.js中来解决此问题。

到目前为止，这是我遇到的唯一有价值的工作。对于这种特定情况。

Answer 3

加载后，filepicker js将2个iframe添加到body。当您使用turbolinks更改页面时，它们就消失了。所以你需要自己再次添加它们：

    if $("#filepicker_comm_iframe").length == 0
      $("body").append '<iframe name="filepicker_comm_iframe" id="filepicker_comm_iframe" src="https://dialog.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'
    if $("#fpapi_comm_iframe").length == 0
      $("body").append '<iframe name="fpapi_comm_iframe" id="fpapi_comm_iframe" src="https://www.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'

访问属性'filepicker_comm_iframe'的权限被拒绝

3 个答案: