如何讓Twitter的widget.js正常運行在第一頁加載使用`link_to`與Rails 5 Turbolinks 5

我想包括Twitter的Widget腳本更好的性能在我的Rails 5應用程序中顯示嵌入的推文（代碼給出在這裏：https://dev.twitter.com/web/javascript/loading）如何讓Twitter的widget.js正常運行在第一頁加載使用`link_to`與Rails 5 Turbolinks 5

function twitterWidget() { 
     alert("twitter"); 
     window.twttr = (function (d, s, id) { 
     var t, js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src= "https://platform.twitter.com/widgets.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
     return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } }); 

    }(document, "script", "twitter-wjs")); 
}; 
$(document).on('turbolinks:load', twitterWidget);

這工作得很好，除非在第一頁的訪問（腳本運行 - 從而表現出我的警告 - 但不能正常顯示鳴叫）。

編輯：上面的代碼將工作，如果我直接調用的頁面，但不是當我使用link_to從另一個頁面。然後它只能用於刷新同一頁面。

我禁用Turbolinks，它工作正常，但我想繼續使用Turbolinks更快的頁面加載。

有沒有解決方案，有選擇地禁用turbolinks只是這個小部件？

感謝您的幫助！

來源

2017-04-04 Martin

感謝一位同事的幫助，我找到了解決問題的辦法。

主要問題是turbolinks不會在頭部運行內容，因此需要將twitter腳本插入到頁面主體中。改變如下腳本已經爲我工作：

function twitterWidget() { 
    window.twttr = (function (d, s, id) { 
     var t, js, fjs = $("body"); 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src= "https://platform.twitter.com/widgets.js"; 
     $(fjs).append(js, fjs); 
     return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } }); 
    }(document, "script", "twitter-wjs")); 
}; 
$(document).on('turbolinks:load', twitterWidget);

希望這會幫助別人！

來源

2017-04-07 11:51:15 Martin

根據Turbolinks docsturbolinks:load事件在初始頁面加載時運行一次，但頁面更改後不運行。

要在每一頁上運行它，你可以嘗試

document.addEventListener("turbolinks:load", twitterWidget)

希望這將有助於！

來源

2017-04-04 21:57:25

它似乎現在加載首頁刷新，但它仍然無法使用'link_to'方法來到達頁面。然後turbolinks似乎禁用運行腳本。所以我想用'turbolinks：load'然後不起作用。 – Martin

如何讓Twitter的widget.js正常運行在第一頁加載使用`link_to`與Rails 5 Turbolinks 5

回答

相關問題