PhoneGap空白模板InAppBrowser插件故障及0.4.5版HelloWorld模板需求

Hey there! Let's break down and solve the problems you're facing with your currency converter app step by step:

Core Issues Identified #

From your code and description, two main problems are causing your online button to fail:

1. Your blank PhoneGap template is missing the InAppBrowser plugin—critical for opening external URLs properly on mobile devices
2. The PhoneGap Desktop app is stuck loading on Windows 10, and you need the default PhoneGap 0.4.5 HelloWorld template (which includes pre-installed core plugins)

1. Fix the Non-Working Online Button #

Your code tries to overwrite window.open with cordova.InAppBrowser.open, but without the plugin installed, this won't work on actual devices. Let's fix this:

Step 1: Add the InAppBrowser Plugin to Your Project #

Open your project's config.xml file and add this line to include the plugin (version 3.2.0 is compatible with PhoneGap 0.4.5):

<plugin name="cordova-plugin-inappbrowser" spec="^3.2.0" />

Step 2: Correct the Online Button Logic #

Your current online() function uses window.location.assign, which loads the URL directly in the app's WebView. Instead, use the InAppBrowser explicitly (and ensure it only runs after Cordova is fully ready):

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  console.log("Cordova is ready! Plugins are available now.");
  // No need to overwrite window.open unless you want all links to use InAppBrowser
}

function offline() {
  window.location.assign("local/offline.html");
}

function online() {
  // Use InAppBrowser to open the online currency page
  cordova.InAppBrowser.open('http://invailor.000webhostapp.com/NewCurrency.html', '_blank', 'location=yes');
}

Also, fix the placement of cordova.js—it needs to load before your custom script in the <body>:

<body>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript">
    // Your custom JS code here
  </script>
  <h1>Welcome to the currency converter</h1>
  <p>How do you want to use this app?</p>
  <input type="button" value="Online" onclick="online()">
  <input type="button" value="Offline" onclick="offline()">
</body>

2. Get the PhoneGap 0.4.5 Default HelloWorld Template #

The HelloWorld template for PhoneGap 0.4.5 comes with all core plugins pre-installed. Here's how to get it:

Option 1: Use the PhoneGap CLI (Bypass the Desktop App) #

Since the desktop app is stuck, use the command line instead:

# Install the exact 0.4.5 version of PhoneGap CLI
npm install -g phonegap@0.4.5
# Create a new HelloWorld project
phonegap create currency-converter com.yourdomain.currencyconverter "CurrencyConverter"
# Add the Android platform for APK building
phonegap platform add android

This project will have all default plugins (including InAppBrowser) ready to go—you can copy your currency converter code into this project's www folder.

Option 2: Manually Download the Template #

You can grab the 0.4.5 HelloWorld template from PhoneGap's historical archives. Once downloaded, extract it and replace your current project's core files (config.xml, cordova.js, and default HTML/JS/CSS) with the template's files, then add your currency converter code.

3. Fix PhoneGap Desktop App Stuck Loading on Windows 10 #

If you still want to use the desktop app, try these quick fixes:

• Disable any antivirus/firewall temporarily—they might be blocking PhoneGap's network requests
• Clear the app's cache: Navigate to C:\Users\[Your Username]\AppData\Roaming\PhoneGap, delete the cache files, then restart the app
• Run the app as Administrator to bypass permission-related loading issues

内容的提问来源于stack exchange，提问作者Thundermole