Rém*_*mon 2 javascript facebook ruby-on-rails turbolinks
上周我升级到使用 Turbolinks 5.0 的 Rails 5。我使用以下脚本通过 Turbolinks 3.0 加载 Facebook 点赞按钮：
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.
有谁知道如何解决这一问题？
小智 5
这是一种将 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>
| 归档时间： |
|
| 查看次数： |
1072 次 |
| 最近记录： |