Turbolink 5.0和Facebook SDK [英] Turbolinks 5.0 and Facebook SDK

问题描述

上周我升级到使用Turbolinks 5.0的Rails 5。我使用以下脚本来加载与Turbolinks 3.0相似的Facebook按钮：

Last week I upgraded to Rails 5 which is using Turbolinks 5.0. I used the following script to load the Facebook like button with Turbolinks 3.0:

fb_root = null
fb_events_bound = false

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless fb_events_bound

bindFacebookEvents = ->
  $(document)
    .on('page:fetch', saveFacebookRoot)
    .on('page:change', restoreFacebookRoot)
    .on('page:load', ->
      FB?.XFBML.parse()
    )
  fb_events_bound = true

saveFacebookRoot = ->
  fb_root = $('#fb-root').detach()

restoreFacebookRoot = ->
  if $('#fb-root').length > 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/nl_NL/all.js#xfbml=1")

initializeFacebookSDK = ->
  FB.init
    appId     : 'YOUR_APP_ID'
    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
    status    : true
    cookie    : true
    xfbml     : true

使用Turbolinks 5.0，只有在页面重新加载时才会显示相似的按钮。当我不重新加载页面时，只需点击链接即可得到此错误：

With Turbolinks 5.0 the like button will only show when the page gets reloaded. When I don't reload the page and just click on a link I get this error:

Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://localhost:3000".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

有人知道如何解决这个问题吗？

Does anyone know how to fix this?

推荐答案

原因是因为某些事件在 Turbolinks 5 中重命名，并且与 Turbolinks 3 。我的建议是尝试在 javascripts / 文件夹下创建一个名为 compatibility.coffee

The reasons for this is because some of the events was renamed in Turbolinks 5 and its not compatible with Turbolinks 3. my suggestion is try creating a file under javascripts/ folder called compatibility.coffee

compatibility.coffee

{defer, dispatch} = Turbolinks

handleEvent = (eventName, handler) ->
  document.addEventListener(eventName, handler, false)

translateEvent = ({from, to}) ->
  handler = (event) ->
    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
    event.preventDefault() if event.defaultPrevented
  handleEvent(from, handler)

translateEvent from: "turbolinks:click", to: "page:before-change"
translateEvent from: "turbolinks:request-start", to: "page:fetch"
translateEvent from: "turbolinks:request-end", to: "page:receive"
translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
translateEvent from: "turbolinks:render", to: "page:update"
translateEvent from: "turbolinks:load", to: "page:change"
translateEvent from: "turbolinks:load", to: "page:update"

loaded = false
handleEvent "DOMContentLoaded", ->
  defer ->
    loaded = true
handleEvent "turbolinks:load", ->
  if loaded
    dispatch("page:load")

jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
  if jQuery.trim(xhr.responseText).length > 0
    dispatch("page:update")

这篇关于Turbolink 5.0和Facebook SDK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！