Question

Hai我是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

请帮帮我。

Answer 1

这是因为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;
    })();
}

Answer 2

你的第二个html文件中没有cordova。当您加载two.html时，您的浏览器会破坏上一页和与之关联的所有脚本。你应该在单页中做所有事情，我建议使用mvvm框架，如angularjs，emberjs等。

所以，确切地说，你的第二个html没有cordova，因此从来没有为该文件触发deviceready。但是，对于第一个html，您有deviceready和ratchet引用。但是，在那里，你没有使用js-custom的sample.js引用。因此，在deviceready内部（在第一个html中），你的棘轮抱怨缺少js-custom引用。

未捕获的referenceerror自定义事件未在文件棘轮中定义

2 个答案: