2014-08-30 73 views
4

海我是新的phonegap和棘輪framework.I試圖加載外部腳本與push.js.這是我的JS文件內容Uncaugth引用錯誤自定義事件不定義在文件ratchet

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 

請幫幫我。

回答

1

您的第二個html文件中沒有cordova。當你加載two.html時,瀏覽器會破壞前一頁和與之相關的所有腳本。你應該在單個頁面中做所有事情,我建議使用一個mvvm框架,比如angularjs,emberjs等。

所以,確切的說,你的第二個html沒有cordova,所以deviceready永遠不會被解僱。但是,對於第一個html,你有設備準備和棘輪參考。但是,在那裏,你沒有js-custom的sample.js引用。所以,在deviceready(在第一個html中)時,你的棘輪抱怨缺少js-custom引用。

+0

但我在設備中裝入有時工作正常,有時不 – 2014-08-30 08:01:08

+0

附加科爾多瓦第一。然後棘輪 – 2014-08-30 09:31:54

+0

沒有工作 – 2014-08-30 10:30:54

7

這是因爲您的WebView實現中缺少window.CustomEvent。

添加此Polyfill並且它每次都有效。我發現在Mozilla開發者網絡的解決方案:

/* 
* 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; 
    })(); 
}