Turbolinks 5.0和Facebook SDK

上週我升級到使用Turbolinks 5.0的Rails 5。我用下面的腳本Turbolinks 3.0加載Facebook的喜歡按鈕：當頁面重新加載得到Turbolinks 5.0和Facebook SDK

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.

有誰知道如何解決這個問題？

來源

2016-07-22 Rémon

造成這種情況的原因是因爲某些事件在Turbolinks 5中重命名，並且與Turbolinks 3不兼容。我的建議是嘗試建立javascripts/文件夾下一個名爲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")

來源

2016-07-22 07:06:23 mrvncaragay

我並不需要整個腳本，因爲翻譯事件就夠了。謝謝！ –

如果你喜歡使用原生Turbolinks 5個事件，您可以將此腳本添加到您的Rails資產：

// FacebookSDK 
// https://developers.facebook.com/docs/plugins/page-plugin/ 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); // Replace 'facebook-jssdk' with your page id. 

// Compatibility with Turbolinks 5 
(function($) { 
    var fbRoot; 

    function saveFacebookRoot() { 
    if ($('#fb-root').length) { 
     fbRoot = $('#fb-root').detach(); 
    } 
    }; 

    function restoreFacebookRoot() { 
    if (fbRoot != null) { 
     if ($('#fb-root').length) { 
     $('#fb-root').replaceWith(fbRoot); 
     } else { 
     $('body').append(fbRoot); 
     } 
    } 

    if (typeof FB !== "undefined" && FB !== null) { // Instance of FacebookSDK 
     FB.XFBML.parse(); 
    } 
    }; 

    document.addEventListener('turbolinks:request-start', saveFacebookRoot) 
    document.addEventListener('turbolinks:load', restoreFacebookRoot) 
}(jQuery));

來源：https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00

來源

2017-02-20 02:44:39 Daniel

這裏是一個將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(); 
});

使用數據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解釋它是如何工作的

來源

2017-03-24 11:35:35

Turbolinks 5.0和Facebook SDK

回答

相關問題