JS定義函數只裝在硬刷新

Gfycat有一個JavaScript庫，使我的網站上寫的導軌和一個div像這樣embeding：JS定義函數只裝在硬刷新

<div class="gfyitem" data-autoplay=false data-id="BestYellowishElephantseal"></div>

要做到這一點，它告訴我添加他們腳本在開啓身體標記後。

<script> 
    (function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "https://assets.gfycat.com/gfycat.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'gfycat-js')); 
</script>

但是，當它添加到body標籤內時，它只會在硬刷新頁面時加載。我通過在函數內部添加一個console.log("Gfycat Loaded");來測試這個。

經過一些谷歌搜索似乎這與turbolinks有關，我之前有過一些問題。

這個問題的解決已添加的JS裏面：

ready = -> 
    # Code here 
$(document).on "page:change", -> ready() 
$(document).on "page:restore", -> ready()

所以我嘗試添加文檔準備內部gfycat功能，但得到完全相同的結果。

任何人都知道是什麼造成了這種情況，以及如何解決它？

來源

2017-03-09 Mellet

將yy包裝到一個函數中，將其命名爲「xxxx3」，「$（xxxx3）; $（document）.on（「turbolinks：load」，xxxx3）;'試試這個，讓我知道。 – 7urkm3n

不起作用。我在Rails 4.2.5上。 'turbolinks：load'什麼都不做。但是，如果我嘗試在稱爲觸發器的函數中使用'page：load'至少一個警報（「Hi」）。 – Mellet

經過一些更多的調試，似乎庫已經加載。如果我在Crome控制檯中編寫gfyCollection，它確實會被識別。如果我寫gfyCollection.init（）gfycat被加載，但由於某種原因沒有視頻元素內的視頻源。 – Mellet

原來這就是我與此刻的測試代碼： https://jsfiddle.net/99f6soxy/

硬刷新我得到：

Page loaded 
Library got called

在點擊一個鏈接我只得到：

Page loaded

來源

2017-03-09 17:05:39 Mellet

你有沒有試過，像這樣？

<script>  
    function gfycatInit(){ 
    function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "https://assets.gfycat.com/gfycat.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'gfycat-js'); 
    } 
    } 
    $(gfycatInit); 
    $(document).on("turbolinks:load", gfycatInit); 
</script>

來源

2017-03-09 17:15:59 7urkm3n

JS定義函數只裝在硬刷新

回答

相關問題