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()很危险，但我不确定在这种情况下它有多危险。

在您的索引\第一页上，将以下脚本放在页面底部，.content div的 OUTSIDE ，这样就不会被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类。此脚本必须放在 INSIDE .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文件。我决定做的是在html的内容div中添加一个id的id，如下所示：

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

然后，在最初的应用程序设置中，我附加了一个名为＆＃39; checkPage＆＃39;推动全球事件：

window.addEventListener('push', checkPage);

checkPage函数从内容div中获取id并检查是否存在同名的javascript文件，如果是，则使用jQuery的$ .getScript（）从{{1}加载它目录

scripts/

这似乎可以解决问题，至少在我的用例中如此。只是想把它丢掉，因为它有可能在某一天帮助别人。

Answer 3

当我使用push.js时，我找到了解决此问题的方法。我最终做的是给每个html页面我要加载一个#description。这意味着当我链接到我链接到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. 
  }
};

不知道这是不是最好的方法，但我觉得我可以很好地控制我的脚本，而且它有效。

Answer 4

把我的想法放在这里。我为Ratchet.js做了一个更改，让每个页面都有单独的js。每个html都有一个链接的js文件。（https://github.com/mazong1123/ratchet-pro）

通过使用新的ratchetPro.js，我们可以做到以下几点：

(function () {
    var rachetPageManager = new window.RATCHET.Class.PageManager();
    rachetPageManager.ready(function () {
        window.RATCHET.getScript('js/jquery.js', function () {
             // Put your logic here.
        });
    });
})();

调用window.RATCHET.getScript加载外部js。加载外部js后，它将被缓存并且永远不会再次加载。但是，当页面切换时，将始终执行回调。

使用Ratchet push.js库执行多个JS文件

4 个答案: