如何使用 `link_to` 和 Rails 上的 Turbolinks 在第一页加载时正确制作 Twitter widget.js 运行 5

Question

我正在尝试包含 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 以加快页面加载速度。

是否有针对此小部件有选择地禁用 turbolinks 的解决方案？

感谢您的帮助！

Answer 1

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

到运行它在你可以尝试的每个页面上

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);

希望这对某人有所帮助！

如何使用 `link_to` 和 Rails 上的 Turbolinks 在第一页加载时正确制作 Twitter widget.js 运行 5

How to make Twitter widget.js run properly on first page load using `link_to` with Turbolinks on Rails 5

javascript

ruby-on-rails

twitter

turbolinks