如何使用`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);

希望這會對某人有所幫助！