如何让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

回答

相关问题