2011-07-21 29 views
5

Tôi đang cố tải động tệp javascript của điện thoại (để tôi có thể chọn không tải tệp đó ở chế độ gỡ lỗi khi tôi đang sử dụng Ripple) nhưng tôi đang gặp một số sự cố .Sự cố với số điện thoại được nạp động phonegap.js

Tôi tải thư viện javascript jquery và jquerymobile bằng cách sử dụng thẻ tập lệnh thông thường. Trong một khối tập lệnh khác, tôi thực hiện:

function onDeviceReady() { 
    alert("Device Ready!"); 
} 
$(document).ready(function() { 
    alert("doc ready!"); 
    $.getScript("js/phonegap.0.9.5.1.js", function() {alert("Got Phonegap!");}); 
    document.addEventListener("deviceready", onDeviceReady, false); 
}); 

Mã này cảnh báo rằng "Got Phonegap!" nhưng không bao giờ cảnh báo "Thiết bị đã sẵn sàng". Sử dụng jsconsole.com, tôi có thể thấy rằng đối tượng JavaScript PhoneGap tồn tại. Tuy nhiên, cố gắng để thiết bị gọi.uuid (hoặc các cuộc gọi API phonegap đơn giản khác) không thành công. Nó gần giống như PhoneGap không hoàn toàn khởi tạo. Dường như không phải như thế. Tui bỏ lỡ điều gì vậy? Cảm ơn!

+1

cuộc gọi addEventListener phải ở trong cuộc gọi lại của bạn với cảnh báo –

+0

@Joseph - Tôi không nghĩ điều đó nên tạo sự khác biệt ... (đã thử và không) – Max

+0

@Max bạn đã tìm thấy giải pháp nào chưa, tôi có vấn đề tương tự. Tôi đã thử tải phonegap với Yabble, RequireJS, LABjs và với javascript đơn giản nhưng nó không hoạt động – dhaval

Trả lời

3

tôi đã phải đối mặt với vấn đề tương tự mà trong đó tôi cần phải nạp PhoneGap và các tập tin Plugin phụ thuộc dựa vào loại nền tảng. Tôi đã đi qua các nguồn PhoneGap và thấy rằng nó sử dụng các sự kiện cửa sổ/trình duyệt để tải và chuẩn bị các đối tượng. Nếu tôi gọi các sự kiện trình duyệt theo cách thủ công thì nó sẽ khởi tạo các đối tượng PhoneGap (API và Plugins) mà tôi cần để chạy ứng dụng của mình.

Các mã sau đây được sử dụng Yabble đã làm việc cho tôi ngay bây giờ:

<html> 
<head> 
<script 
    src="https://raw.github.com/jbrantly/yabble/master/lib/yabble.js"></script> 

<script> 
    require.setModuleRoot("js"); 
    require.useScriptTags(); 

    require.ensure([ "jquery", "phonegap" ], function(require) { 

     // Trigger PhoneGap Initialization 
     PhoneGap.onPhoneGapInit.fire(); 

     // Load PhoneGap Plugins 
     require.ensure([ "plugin1" ], function() { 
      $("#console").append("Plugin1 loaded<br>"); 
     }); 

     // Both following functions will work only if PhoneGap is loaded/initialized and Plugin is successfully registered 

     // Check PhoneGap device object 
     $("#checkDevice").click(function() { 
      console.log(JSON.stringify(device)); 
     }); 

     // Call Native Plugin 
     $("#callPlugin").click(function() { 
      window.plugins.plugin1.call(); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div id="console"></div> 

    <input type="button" id="checkDevice" value="Check Device"> 
    <input type="button" id="callPlugin" value="Call Plugin"> 
</body> 
</html> 

Cả hai thông tin thiết bị và Plugin gọi đang làm việc tốt trên Android. Mặc dù tôi chưa kiểm tra tất cả API PhoneGap nhưng hiện tại tôi chỉ cần hai thiết bị này hoạt động và chúng đang hoạt động.

Sửa

Trong PhoneGap 1.5/Cordova, PhoneGap.onPhoneGapInit.fire(); không có sẵn do sự thay đổi API. Trong thử nghiệm hiện tại của tôi hầu hết các đối tượng cần thiết có sẵn mà không có bất kỳ thay đổi nào sau khi tải JS động. Kiểm tra cập nhật có sẵn tại gist này - Cordova Lazy Load Test

+0

Tôi có cùng một vấn đề, và tôi không thể tìm thấy một giải pháp không sử dụng require.js. Đó là nhiều hơn: Tôi đang bối rối về lý do tại sao điều này xảy ra. Tôi đã kiểm tra việc đánh dấu và bản scan cordova ở đó. Do đó nó phải được thực hiện và khởi tạo. Nhưng nó đã không! –

0

1) bạn đã thử gọi addEventListener trước getScript chưa?

2) cũng vậy, bạn có sử dụng đúng phonegap.js cho thiết bị của mình không? (khi sử dụng iphone phonegap.js trên android i có cùng hành vi 'im lặng')

+0

Tôi đã thử thêm eventListener trước khi getScript (cảnh báo vẫn chưa được kích hoạt và thiết bị vẫn chưa được xác định) và tôi chỉ cần đã sao chép phonegap.js từ Android. Vẫn không có gì ... – Max

+0

bao giờ thử bên ngoài gợn? tôi có nghĩa là trong một thiết bị Android cắm usb thực? – jujule

+0

tất cả các bài kiểm tra của tôi đều có trên thiết bị Droid Incredible "thực" chạy 2.2. Đã cố gắng chuyển xung quanh cuộc gọi addEventListener ... nhưng tôi thực sự không nghĩ đó là vấn đề. Điều đáng lo ngại nhất là biến "device" là không xác định. Tôi không biết đó là gì về ... – Max

0

Sự kiện deviceready là một sự kiện đặc biệt được xử lý bằng mã trong phonegap.js bởi duck punch document.addEventListener vì vậy phonegap.js phải được tải trước khi bạn có thể đính kèm một sự kiện vào deviceready.

Hãy thử điều này:

function onDeviceReady() { 
    alert("Device Ready!"); 
} 
$(document).ready(function() { 
    alert("doc ready!"); 
    $.getScript("js/phonegap.0.9.5.1.js", function() { 
     alert("Got Phonegap!"); 
     document.addEventListener("deviceready", onDeviceReady, false); 
    }); 
}); 
+0

cảm ơn vì phản hồi!Thật không may, tôi đã chụp cảnh này và cảnh báo "Thiết bị đã sẵn sàng" vẫn không hiển thị. Sử dụng jsconsole, tôi có thể thấy đối tượng PhoneGap, nhưng biến "device" là không xác định. Tôi nghĩ tôi sẽ đợi bản phát hành 1.0 của PhoneGap vào thứ Sáu và thử lại ... – Max

+0

@Max, bạn có bao giờ làm việc đó không? Nếu vậy, làm thế nào? Cảm ơn. –

+0

@Dingredient xin vui lòng kiểm tra câu trả lời của tôi nếu điều đó hoạt động – dhaval

0

Tôi đã có thể mô phỏng đúng quy trình khởi tạo PhoneGap sau khi tiêm tự động bằng cách chạy mã javascript sau ngay sau khi nhập tập lệnh phonegap.js.

if (document.readyState == "complete") { 

    PhoneGap.onDOMContentLoaded.fire(); 
} 
8

Cuối cùng tôi đã làm việc đó mà không cần sử dụng bất kỳ thư viện bên ngoài nào.

CÁC VẤN ĐỀ
Đối với một dự án PhoneGap đa nền, hai là các phần khác nhau từ một nền tảng khác:

  • Dự án Encapsulating
  • File javacript PhoneGap.

Các dự án đóng gói này thường không thay đổi nhiều trong quá trình của dự án. Nó sẽ là mong muốn để có một mã HTML đơn mà người ta có thể trực tiếp dán (hoặc sử dụng các kịch bản xây dựng) vào các dự án dựa trên nền tảng. Vì thư viện javascript phonegap nằm bên trong tập hợp các tập tin web, nên thật sự rất khó để thay thế đúng tập tin mỗi lần.

GIẢI PHÁP CỦA TÔI
Trong dự án của tôi, tôi có một vài file cordova, một cho mỗi nền tảng mục tiêu:

  • cordova.android.js
  • cordova.ios.js
  • cordoba.bb .js ...

(Lưu ý cách mọi tệp này được bao gồm trong ap p ngay cả khi nó không được sử dụng. Đối với tôi nó không phải là một vấn đề, kể từ khi các kịch bản được gói trong ứng dụng và chỉ có một cho nền tảng chính xác được nạp vào bộ nhớ).

Trong trang của tôi, thay vì một thẻ script cho PhoneGap, tôi đặt các module loader:

<script src="phonegap-loader.js"></script> 

Và đây sẽ là kịch bản PhoneGap-loader.js. Tôi sử dụng tính năng phát hiện tác nhân người dùng để tải động và đồng bộ tập lệnh:

(function(){ 
     var useragent = navigator.userAgent; 


     if(/Android/i.test(useragent)){ 
      loadScript('cordova.android.js'); 
     } else if((/iPhone/i.test(useragent)) || (/iPad/i.test(useragent))){ 
      loadScript('cordova.ios.js'); 
     } 
     ... 
     // Else desktop browser is assumed and no phonegap js is loaded 


     function loadScript(url){ 
      // synchronous load by @Sean Kinsey 
      // https://stackoverflow.com/a/2880147/813951 
      var xhrObj = new XMLHttpRequest(); 
      xhrObj.open('GET', url, false); 
      xhrObj.send(''); 
      var se = document.createElement('script'); 
      se.text = xhrObj.responseText; 
      document.getElementsByTagName('head')[0].appendChild(se); 
     } 
    })(); 

Điều quan trọng là tải tập lệnh SYNCHRONOUSLY. Điều này đã cho tôi vô số đau đầu. Trước khi nhận ra điều này, tôi đã thử thêm các thẻ script ở cuối đầu và sử dụng $ .getScript, nhưng không có thẻ nào hoạt động, vì ondeviceReady không được kích hoạt. Có vẻ như cách tiếp cận hợp lệ duy nhất để đảm bảo tập lệnh Phonegap được thực hiện khi được nạp động là hình được hiển thị trong số amazing answer by @Sean Kinsey này (tất cả các kudo cho anh ta).

Hạn chế duy nhất là tập lệnh được gạch chân, nhưng đối với tôi là một mức giá rẻ để trả tiền để ứng dụng HTML5 cốt lõi cuối cùng bị cô lập khỏi các vùng chứa.

+1

đây thực sự là một giải pháp hợp lệ, cho bất kỳ ai sử dụng nó, chú ý rằng loadScript phải là hàm loadScript (url) {.. –

+0

@ Pavel'PK'Kaminsky Cảm ơn, tôi đã chỉnh sửa câu hỏi. –

+0

Làm thế nào nó đến mà tôi không thể tải thư viện js trên iOS [giả lập 6.1]. nó hoạt động tốt trong android nhưng trong iOS có os không có cách nào. Tui bỏ lỡ điều gì vậy ? – dawez

Các vấn đề liên quan