phonegap inappbrowser IOS not working - ios

Question

I created a project in phonegap for IOS and I want to open a ulr in my IOS browser but not inside my app. I tried to use inAppBrowser plugin but it seems it doesn't to working.
I only use .html, .css, .js files and the config.xml and I am on Windows and I build my project with online tool Adobe Phonegap builder
If I get it right, according to this link https: build.phonegap.com/plugins/658 there is no need to install the plugin you want to use, as some suggest with the command cordova plugin add.... You can have your job done by reffering the plugin inside the config.xml file. Am I right?
My config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = " www.w3.org/ns/widgets"
xmlns:gap = " phonegap.com/ns/1.0"
id = "com.test.testingApp"
version = "1.0.0">
<name>test</name>
<!-- app icons and splashscreen -->
<icon src="icon.png" />
<gap:splash src="splash.png" />
<platform name="android">
<icon density="mdpi" src="res/android/icon-48-hdpi.png" />
<icon density="hdpi" src="res/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="res/android/icon-96-hdpi.png" />
<icon density="xxhdpi" src="res/android/icon-144-hdpi.png" />
<gap:splash gap:density="mdpi" src="splash.png" width="320" height="470" />
<gap:splash gap:density="hdpi" src="splash.png" width="480" height="640" />
<gap:splash gap:density="xhdpi" src="splash.png" width="720" height="960" />
<gap:splash gap:density="xxhdpi" src="splash.png" />
</platform>
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" width="60" height="60" />
<icon src="res/ios/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/icon-76#2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/icon-40#2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/icon-72#2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/icon-small#2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/icon-50#2x.png" width="100" height="100" />
</platform>
<preference name="phonegap-version" value="3.3.0" />
<!-- splashscreen delay -->
<preference name="SplashScreenDelay" value="5000" />
<access origin="*" browserOnly="true"/>
<!-- <content src=" mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />
<preference name="loglevel" value="DEBUG" />
<!-- <preference name="orientation" value="portrait" /> -->
<preference name="loadUrlTimeoutValue" value="20000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<!--
<preference name="splashscreen" value="resourceName" />
<preference name="backgroundColor" value="0xFFF" />
<preference name="loadUrlTimeoutValue" value="20000" />
<preference name="InAppBrowserStorageEnabled" value="true" />
<preference name="disallowOverscroll" value="true" />
<preference name="keepRunning" value="false" />
-->
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.Device"/>
</feature>
<!--
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.AccelListener"/>
</feature>
<feature name="Compass">
<param name="android-package" value="org.apache.cordova.CompassListener"/>
</feature>
<feature name="Media">
<param name="android-package" value="org.apache.cordova.AudioHandler"/>
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.CameraLauncher"/>
</feature>
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.ContactManager"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.FileUtils"/>
</feature>
-->
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.NetworkManager"/>
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification"/>
</feature>
<!--
<feature name="Storage">
<param name="android-package" value="org.apache.cordova.Storage"/>
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.FileTransfer"/>
</feature>
<feature name="Capture">
<param name="android-package" value="org.apache.cordova.Capture"/>
</feature>
<feature name="Battery">
<param name="android-package" value="org.apache.cordova.BatteryListener"/>
</feature>
-->
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<!--
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.Echo"/>
</feature>
<feature name="Globalization">
<param name="android-package" value="org.apache.cordova.Globalization"/>
</feature>
-->
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<!-- Deprecated plugins element. Remove in 3.0 -->
<plugins>
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
</plugins>
</widget>
My index.html file is:
<html>
<head>
<meta charset="utf-8" />
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>Hello World</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova_plugins.js"></script>
<link rel="stylesheet" href=" code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src=" code.jquery.com/jquery-1.10.2.min.js"></script>
<script src=" code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<!-- MAIN BODY -->
<div data-role="content" role="main" style="padding-bottom:230px;">
<div class="main_header">
<br />
PlanTech
<br />
PlanTech
</div>
</div>
</div>
<div id="highlight"></div>
</body>
</html>
The problem is that both links open inside my app (and not in a separate browser as they supposed to). As a result, there is no chance to get back to my index.html page after one of the links is clicked without ending the app and restarting it.
I would appreciate it if someone could help me go through this, because I searched several times the internet and I am stuck.
Thanks in advance everyone for your time.

Answer 1

I have a solution for this ... there is no chance to get back to my index.html page after one of the links clicked
If you go through complete documentation,
1 - Return the window object like
var ref = window.open ('www.google.com', '_blank', 'location=yes');
2 - Add an event listener for exit event.
ref.addEventListener(exit, myexitcallback);
3 - close method will close the browser window. So, in your function call back :
function myexitcallback{
ref.close();
}
Hope this will solve your problem.
Good luck.

Answer 2

Finally, I found the solution to my question myself. As usual it was in front of my eyes, but I would find it not in a thousand years if I wasn't lucky enough to see it.
As the config.xml itself suggests: <!-- Deprecated plugins element. Remove in 3.0 -->
So I had to change the following code
<plugins>
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
</plugins>
with THIS:
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />