用棘轮push.js库执行几个JS文件

Question

我正在开发一个带有棘轮2.0.2的Phonegap应用程序，它使用push.js实现页面之间的转换。一切都进展顺利，但几个小时前，我偶然发现：

包含JavaScript的脚本标记将不会在带有push.js的页面上执行。如果要将事件处理程序附加到其他页上的元素，则文档级事件委托是常见的解决方案。

在做了更多的研究之后，我发现了这一点：Execute custom script after page loaded with Ratchet\Push.js

这几乎是我遇到的问题，但是我需要更进一步，因为我不仅需要加载一个脚本，还需要加载两个脚本(未来可能还要加载更多脚本)，如何利用checkPage()加载多个脚本？

var checkPage = function(){
    //Only run if twitter-widget exists on page
    if(document.getElementById('twitter-widget')) {
        loadTwitterFeed(document,"script","twitter-wjs");
    }
};

window.addEventListener('push', checkPage);

Answer 1

更新:还请参见this question.

这里有一个解决方案，我已经尝试过，它似乎是正确的，但我正在寻找一些反馈，这是否是最好的方法.请随时评论，我会根据需要更新。我知道eval()是危险的，但我不知道在这种情况下它有多危险。

在索引\第一页上，将下面的脚本放置在页面的底部，即 of .content div，这样它就不会被push.js覆盖。

<script>
    window.addEventListener('push', function(){
        var scriptsList = document.querySelectorAll('script.js-custom');
        for(var i = 0; i < scriptsList.length; ++i) {
            eval(scriptsList[i].innerHTML);
        }
    });
</script>

然后，在通过push.js加载的任何其他页面上，只需给脚本一个.js-custom类即可。这个脚本必须放在中，-- .content div。

<div class="content">
    ...
    <script class="js-custom">
         alert('I was executed!');
    </script>
</div>

第一个脚本将找到并循环使用<script>类遍历任何.js-custom标记，并使用eval()执行它的内容。

Answer 2

以下是我为push.js加载脚本的版本，改编自Danito的答案。

对于html和js文件，我有1:1的关系。将有一个thinga.html和thinga.js文件。我决定将thinga的id添加到html中的内容div中，如下所示：

<div class="content" id="thinga">
    ...
</div>

然后，在最初的应用程序设置中，我将一个名为“checkPage”的函数附加到push全局事件：

window.addEventListener('push', checkPage);

checkPage函数从内容div获取id并检查是否存在同名的javascript文件，如果存在，则使用jQuery的$.getScript()从scripts/目录加载它

var checkPage = function(){

    var elm = document.getElementsByClassName("content")[0];
    var script = elm.id;

    if(script) {
        $.getScript("scripts/"+elm.id+".js")
        .done(function( script, textStatus ) {
           console.log( textStatus );
        })
        .fail(function( jqxhr, statusText, errorThrown ) {
            console.log(errorThrown);
            console.log(statusText);
            console.log(jqxhr);
        });
    }
};

这看起来很管用，至少对我的用例来说是这样。我只是想把它扔出去，以免它有一天会对别人有帮助。

Answer 3

在使用push.js时，我已经找到了解决这个问题的方法。最后，我要做的是给每个我想要加载的html页面一个#描述。这意味着当我链接到页面时，我会链接到contactlist.html#contact。

在我的主html页面上，我添加了事件侦听器：

 window.addEventListener('push', pageHandler);

然后在一个单独的文件中运行这个脚本。

var pageHandler= function(){
  var page= window.location.hash;

  if (page == '#contact'){
     //Put every script you want to use on this page here. 
  }
  if(page == '#info'){
    //Same here, every script you need for this page. 
  }
};

不知道这是否是最好的方法，但我觉得我对我的脚本有很好的控制能力，而且效果很好。