如何使用带有 Turbolinks on Rails 5 的 `link_to` 使 Twitter widget.js 在首页加载时正常运行答案

【问题标题】：How to make Twitter widget.js run properly on first page load using `link_to` with Turbolinks on Rails 5如何使用带有 Turbolinks on Rails 5 的 `link_to` 使 Twitter widget.js 在首页加载时正常运行
【发布时间】：2017-08-29 23:55:32
【问题描述】：

我正在尝试包含 twitter 小部件脚本，以便更好地在我的 Rails 5 应用程序中显示嵌入式推文（此处提供的代码：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 以加快页面加载速度。

是否可以通过选择性地禁用此小部件的 turbolink 来解决此问题？

感谢您的帮助！

【问题讨论】：

标签： javascript ruby-on-rails twitter turbolinks

【解决方案1】：

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

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

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

希望对您有所帮助！

【讨论】：

它现在似乎在第一页刷新时加载，但在使用 link_to 方法到达页面时仍然无法正常工作。然后 turbolinks 似乎禁用了运行脚本。所以我猜使用turbolinks:load 然后没有效果。

【解决方案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);

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

【讨论】：