gpt4 book ai didi

javascript - Turbolinks 5.0 和 Facebook SDK

转载 作者:行者123 更新时间:2023-12-02 22:16:14 27 4
gpt4 key购买 nike

上周我升级到了使用 Turbolinks 5.0 的 Rails 5。我使用以下脚本通过 Turbolinks 3.0 加载 Facebook Like 按钮:

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 中,“赞”按钮仅在页面重新加载时才会显示。当我不重新加载页面而只是单击链接时,我收到此错误:

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.

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

最佳答案

这是一种将 Turbolinks 5 与 Facebook SDK 集成的方法。

在布局模板中:

// /source/layouts/layout.erb
<body class="<%= page_classes %>">
<%= yield %>
<div id='permanent' data-turbolinks-permanent></div>
</body>

然后在您的 javascript 中使用 jQuery:

function FBInit() {
FB.init({
appId : 'YOUR_KEY',
xfbml : true,
version : 'v2.8'
});
$('#permanent').append( $('#fb-root').detach() );
};

$(document).ready(function(){
$.getScript( "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8", FBInit);
});

$(document).on('turbolinks:load', function(event){
if (typeof FB !== "undefined" && FB !== null) {
FB.XFBML.parse();
}
});

$(document).on("turbolinks:before-cache", function() {
$('[data-turbolinks-no-cache]').remove();
});

然后使用任何带有 data-turbolinks-no-cache 属性的 Facebook 插件,如下所示:

<div data-turbolinks-no-cache 
class="fb-like"
data-href="#"
data-layout="standard"
data-action="like"
data-size="small"
data-show-faces="true"
data-share="true"></div>

这是gist这是 blog post解释它是如何工作的

关于javascript - Turbolinks 5.0 和 Facebook SDK,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38520102/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com