Question

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

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

为此，它告诉我在打开的body标签之后添加他们的脚本。

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

任何人都知道造成这种情况的原因以及如何解决这个问题？

Answer 1

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

在硬刷新时我得到：

Page loaded
Library got called

点击链接后我才会收到：

Page loaded

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

JS定义只在硬刷新时加载的函数

2 个答案: