4

海我是 phonegap 和棘轮框架的新手。我正在尝试使用 push.js 加载外部脚本。这是我的js文件内容

function init(){
    document.addEventListener('deviceready', onDeviceReady, false);

    function onDeviceReady(){

        alert("device ready for use");
        }
       var checkPage = function(){

        alert("push");
        var scriptName; 
        var scriptsList = document.querySelectorAll('script.js-custom');  // Add a "js-custom" class to your script tag
        for (var i = 0; i<scriptsList.length;i++) {

            // Handle scripts in separate files by assigning the script file name to its id.
            // We save it in a variable because the ".done" callback is asynchronous.
            scriptName = scriptsList[i].id;  // IMPORTANT: Only one loadable script per page!
            $.getScript("js/" + scriptName)
              .done(function (script, textStatus) {
                  eval(script);
                  alert("ok");
              })
              .fail(function(){
                  alert("error");
              });

        }


    };   

    window.addEventListener('push', checkPage);

    }

这是我的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">  
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.min.css" rel="stylesheet">

    <!-- Include the compiled Ratchet JS -->
    <script src="js/ratchet.min.js"></script> 
    <script src="js/jquery.js"></script>
     <script src="cordova.js"></script>

  </head>
  <body onload="init()">  

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">

      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">

            <a class="push-right" href="two.html">
              <strong>Another page</strong>
            </a>
          </li>  
          <li class="table-view-cell"> 
            <a class="push-right" href="https://github.com/twbs/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>

      </div>
    </div>

这是我的 two.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Notes</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Roboto
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700"> -->

    <link rel="stylesheet" href="ratchet.min.css">
    <script src="ratchet.min.js"></script>
  </head>
  <body>
      <header class="bar bar-nav">
  <h1 class="title">Two</h1>
    </header>
  </body>
  <div class="content">
  <script src="js/sample.js" class="js-custom" id="sample.js"></script>
  </div>
</html>

但我运行我得到的项目

Uncaught ReferenceError: CustomEvent is not defined at file:///android_asset/www/js/ratchet.min.js:10

请帮我。

4

2 回答 2

7

这是因为您的 WebView 实现中缺少 window.CustomEvent 。

添加这个 Polyfill，它每次都能正常工作。我在 Mozilla Developer Network 上找到了解决方案：

/*
 * Polyfill for adding CustomEvent
 * see : https://developer.mozilla.org/fr/docs/Web/API/CustomEvent
 */

if (!window.CustomEvent) { // Create only if it doesn't exist
    (function () {
        function CustomEvent ( event, params ) {
            params = params || { bubbles: false, cancelable: false, detail: undefined };
            var evt = document.createEvent( 'CustomEvent' );
            evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
            return evt;
        };

        CustomEvent.prototype = window.Event.prototype;

        window.CustomEvent = CustomEvent;
    })();
}
于 2014-09-02T14:48:13.447 回答
1

您的第二个 html 文件中没有cordova。当您加载 two.html 时，您的浏览器会破坏前一页以及与之关联的所有脚本。您应该在单页中完成所有操作，我建议使用 mvvm 框架，例如 angularjs、emberjs 等。

因此，确切地说，您的第二个 html 没有cordova，因此永远不会为该文件触发 deviceready。但是，对于第一个 html，您有 deviceready 和 ratchet 引用。但是，在那里，您没有带有 js-custom 的 sample.js 参考。因此，在 deviceready 内部（在第一个 html 中时），您的棘轮抱怨缺少 js-custom 引用。

于 2014-08-30T07:23:21.873 回答