cordova-plugin-inappbrowser and iOS

421 views
Skip to first unread message

Matt Chalker

unread,
Sep 16, 2015, 12:30:21 AM9/16/15
to phonegap
I am working on an app for both android and iOS that will be opening external links. I am currently using cordova-plugin-inappbrowser 1.0.1 to open my links and it is working perfectly in Android, but I seem to be running into the same problem that many other people have. In iOS, I do not get a toolbar to appear and thus am stuck as I cannot click on the "done" button (or back/forward buttons for that matter.) I have built the app using both phonegap build online and through the command line tools, with the same behavior in each instance. It does not work in either an emulated environment or a native device environment. I have been searching online and this seems to be an extremely common problem, but none of the proposed solutions have worked over the past 2 days and ~15 hours of testing (for just a stupid little link!)  I would like to remain in-app, but would not be opposed to going to safari if that is the only solution. My relevant code and versions:
Phonegap cli-5.1.1 (iOS 3.8/Android 4.02)
Cordova 3.5.0-0.2.7
cordova-plugin-inappbrowser 1.0.1

config.xml relevent code:
  <gap:plugin name="cordova-plugin-inappbrowser" source="npm" version="1.0.1" />
 
  <plugins>
    <plugin name="InAppBrowser" value="CDVInAppBrowser" />
  </plugins>
 
  <feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
  </feature>

index.html:

<head>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
                <script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<script type="text/javascript" charset="utf-8">
    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
    // Global InAppBrowser reference
    var iabRef = null;
    function iabLoadStart(event) {
        alert(event.type + ' - ' + event.url);
    }
    function iabLoadStop(event) {
        alert(event.type + ' - ' + event.url);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
// Cordova is ready
//
function onDeviceReady() {
alert('Device is ready!');
//iabRef = window.open('http://apache.org', '_blank', 'location=yes');
//iabRef.addEventListener('loadstart', iabLoadStart);
//iabRef.addEventListener('loadstop', iabLoadStop);
//iabRef.addEventListener('exit', iabClose);
}
</script>
<style type="text/css">
 .centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
body
{
background: #000 !important;
background-image:url(backgrounds/1080widephone.png) !important;
background-size:cover !important;  
}
.ui-content{
background: transparent !important;
}
.ui-page{
background: transparent !important;
}
.ui-footer{
background: transparent !important;
}  
</style>
</head>

Various links (all act as buttons):

<a href="#" onclick="window.open('url' ,'_blank')" data-role="button" data-mini="true" data-shadow="false" data-theme="a" data-icon="extlink" data-iconpos="right" ><div style="white-space:normal">URL Description</div></a> 
(NOTE: This appears to open in the default WebView for iOS and the inappbrowser for Android)

<a href="#" onclick="cordova.InAppBrowser.open('url' ,'_blank', 'location=yes' , 'toolbar=yes', 'toolbarposition=top' , closebuttoncaption=Return',)" data-role="button" data-mini="true" data-shadow="false" data-theme="a" data-icon="extlink" data-iconpos="right"><div style="white-space:normal"> URL Description</div></a>
(NOTE: Nothing happens when I use this in either iOS or Android builds. I based this syntax off of the description at https://github.com/apache/cordova-plugin-inappbrowser)

My kneejerk reaction is that the plugin isn't loading, but I don't see how that can be the case if it is clearly working in an android build but not an iOS build using exactly the same code on phonegap build. Any help would be greatly appreciated, I feel like I'm running around in circles here!


jcesarmobile

unread,
Sep 16, 2015, 2:04:05 AM9/16/15
to phonegap
should be

cordova.InAppBrowser.open('url' ,'_blank', 'location=yes,toolbar=yes,toolbarposition=top,closebuttoncaption=Return');

Steve Husting

unread,
Sep 16, 2015, 10:35:19 AM9/16/15
to phonegap
I see a mistake here:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
                <script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

You have cordova.js twice, and phonegap.js. You only need one. Pick one and delete the other two.

jcesarmobile

unread,
Sep 17, 2015, 1:55:07 AM9/17/15
to phonegap
Right, and remove phonegap.js and cordova_plugins.js too
Reply all
Reply to author
Forward
0 new messages