Phonegap：InAppBrowser v0.5.4插件在Android中不起作用（Cordova v3.6.4）

Question

I'm using cordova InAppBrowser plugin inside my app. I installed the plugin using this code:

cordova plugin add org.apache.cordova.inappbrowser

What I want from the InAppBrowser plugin is, I want all external links inside my app side nav to be opened inside device browser. Not inside the app.

It's working perfectly for me when I tested it using Phonegap Developer App and phonegap serve command.

But, when I export an APK of it and installed it on the same device, the InAppBrowser plugin didn't open external links inside the browser. Nothing happened when I clicked on the links.

My config.xml file:

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.zulhilmizainudin.webhostingbandwidthcalculator" version="1.0.0">
  <name>WebHostingBandwidthCalculator</name>
  <description>Hello World sample application that responds to the deviceready event.</description>
  <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>
  <feature name="http://api.phonegap.com/1.0/device"/>
  <preference name="permissions" value="none"/>
  <preference name="orientation" value="default"/>
  <preference name="target-device" value="universal"/>
  <preference name="fullscreen" value="true"/>
  <preference name="webviewbounce" value="true"/>
  <preference name="prerendered-icon" value="true"/>
  <preference name="stay-in-webview" value="false"/>
  <preference name="ios-statusbarstyle" value="black-opaque"/>
  <preference name="detect-data-types" value="true"/>
  <preference name="exit-on-suspend" value="false"/>
  <preference name="show-splash-screen-spinner" value="true"/>
  <preference name="auto-hide-splash-screen" value="true"/>
  <preference name="disable-cursor" value="false"/>
  <preference name="android-minSdkVersion" value="7"/>
  <preference name="android-installLocation" value="auto"/>
  <icon src="icon.png"/>
  <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi"/>
  <icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi"/>
  <icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi"/>
  <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi"/>
  <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
  <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
  <icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
  <icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
  <icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
  <icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
  <icon src="res/icon/webos/icon-64.png" gap:platform="webos"/>
  <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
  <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background"/>
  <gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi"/>
  <gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi"/>
  <gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi"/>
  <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi"/>
  <gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
  <gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
  <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
  <gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
  <gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
  <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
  <access origin="*" browserOnly="true"/>
  <gap:plugin name="org.apache.cordova.inappbrowser" />
</widget>

My question :

How to make the InAppBrowser plugin working for the production version (APK)?

Note :

I'm using cordova v3.6.4 for this project.

Answer 1

Solve. I downgrade the InAppBrowser from v0.5.4 to v0.2.4 .

First, I remove the v.0.5.4 plugin using this command:

cordova plugin rm org.apache.cordova.inappbrowser

Then, I add v0.2.4 plugin using this command:

cordova plugin add org.apache.cordova.inappbrowser@0.2.4

Finally, I update my config.xml file:

<access origin="*" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />

It's now working perfectly on Android 4.1.1!

Answer 2

The problem is this line in your config.xml

<access origin="*" browserOnly="true"/>

You need to add additional lines for the external domains you want to allow to be opened in external links. For example if you want to allow google links to open in an external browser

<access origin="*twitter.*" launch-external="yes" />

Then you may also need to prevent the default action from happening when links are clicked. I like this sort of code to open the links it depends on your links having a proper href and also all your external links having class="external"

jQuery(document).delegate('.external', 'click', function (e) {
    window.open(e.target.href, '_system');
    e.preventDefault();
});