JS定义仅在硬刷新时加载的功能答案

【问题标题】：JS to define function only loading on hard refreshJS定义仅在硬刷新时加载的功能
【发布时间】：2017-03-09 15:15:10
【问题描述】：

Gfycat 有一个 javascript 库，可以嵌入到我用 Rails 编写的网站上，其中包含这样的 div：

<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 函数，但得到完全相同的结果。

有人知道是什么原因造成的以及如何解决吗？

【问题讨论】：

将 yr Gfy 包装成一个函数名，如你所愿“xxxx3”，$(xxxx3); $(document).on("turbolinks:load", xxxx3); 试试这个并告诉我。
不起作用。我在 Rails 4.2.5 上。 turbolinks:load 什么都不做。但是，如果我尝试在名为 triggers 的函数中使用 page:load 至少有一个 alert("Hi")。
经过更多调试后，似乎库确实被加载了。如果我在 Crome 控制台中编写 gfyCollection，它确实会被识别。如果我写 gfyCollection.init() 会加载 gfycat，但由于某种原因，视频元素内没有视频源。

标签： javascript ruby-on-rails turbolinks gfycat

【解决方案1】：

这就是我目前正在测试的代码： https://jsfiddle.net/99f6soxy/

在硬刷新时我得到：

Page loaded
Library got called

点击一个链接我只得到：

Page loaded

【讨论】：

【解决方案2】：

你试过这样吗？

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

【讨论】：