问题描述
上周我升级到使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!