5

我正在开发一个带有 Ratchet 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);
4

4 回答 4

6

更新：另见这个问题。

这是我尝试过的一个解决方案，它似乎可以正常工作，但我正在寻找一些关于这是否是最好的方法的反馈......请随时发表评论，我会根据需要进行更新。我知道这eval()很危险，但我不确定在这种情况下有多危险。

在您的 index\first 页面上，将以下脚本放在页面底部，div之外.content，这样它就不会被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. 这个脚本必须放在div里面.content。

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

第一个脚本将查找并循环使用该类的任何<script>标签，并使用..js-customeval()

于 2014-04-26T21:59:01.683 回答
2

这是我的 push.js 加载脚本版本，改编自 Danito 的回答。

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

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

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

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);
        });
    }
};

这似乎可以解决问题，至少对于我的用例而言。只是想把它扔出去，以防有一天它可能会帮助别人。

于 2014-08-26T16:33:49.247 回答
1

当我使用 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. 
  }
};

不知道这是否是最好的方法，但我觉得我可以很好地控制我的脚本，并且它可以工作。

于 2014-10-09T11:39:45.703 回答
1

把我的想法放在这里。我对 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 被加载，它将被缓存并且永远不会再次加载。但是，回调将始终在页面切换时执行。

于 2015-10-08T02:06:14.810 回答