如何使用`link_to`和Rails 5上的Turbolinks使Twitter widget.js在首页加载时正常运行

Question

我试图包括twitter小部件脚本，以提高在Rails 5应用程序中显示嵌入式tweet的性能（此处提供的代码： https : //dev.twitter.com/web/javascript/loading ）

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来加快页面加载速度。

通过有选择地仅禁用此小部件的涡轮链接，是否有解决方案？

谢谢你的帮助！

Answer 1

根据Turbolinks文档， turbolinks:load事件在初始页面加载时运行一次，但在页面更改后不会运行。

要在每个页面上运行它，您可以尝试

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

希望对您有所帮助！

Answer 2

感谢同事的帮助，我找到了解决问题的方法。

主要问题是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);

希望这会对某人有所帮助！