CODEWITHSUNDEEP
cordovawindow.opencordova-pluginsinappbrowser
woolm110
woolm110

Reputation: 1204

Cordova InAppBrowser not zooming

I'm having issues using the InAppBrowser plugin from Cordova, I can't seem to activate zooming.

I've added the InAppBrowser plugin to my app and i'm calling it like so..

HTML: note - I've tried changing/removing the meta tags but nothing made any difference

<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/snap.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>

JavaScript:

/**
 * Global window.open
 * InAppBrowser Plugin
 * http://cordova.apache.org/docs/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html
 */

var iabRef = null;

function iabLoadStart(event) {
    spinner.spin(target);
}

function iabLoadStop(event) {
    spinner.stop();
}

function iabLoadError(event) {
    // alert(event.type + ' - ' + event.message);
}

function iabClose(event) {
     iabRef.removeEventListener('loadstart', iabLoadStart);
     iabRef.removeEventListener('loadstop', iabLoadStop);
     iabRef.removeEventListener('loaderror', iabLoadError);
     iabRef.removeEventListener('exit', iabClose);
}

function loadExternalUrl(url) {
    iabRef = window.open(url, '_blank', 'location=yes,EnableViewPortScale=yes');
    iabRef.addEventListener('loadstart', iabLoadStart);
    iabRef.addEventListener('loadstop', iabLoadStop);
    iabRef.removeEventListener('loaderror', iabLoadError);
    iabRef.addEventListener('exit', iabClose);
    return false;
}

HTML:

<a onclick="loadExternalUrl('http://www.someurl.co.uk')">url</a>

It loads the webpage fine, problem is its incredibly zoomed in and I have no control whatsoever over pinching or zooming. I've read several posts but can't seem to get it to work.

Cordova versions:

cordova -v => 4.0.0
cordova plugin list => org.apache.cordova.inappbrowser 0.5.4-dev "InAppBrowser"
cordova platform version android => android 3.6.4

Manifest.xml

<feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>

If anyone can shed some light on why I can't zoom then i'd be VERY grateful!

Thanks in advance!

Upvotes: 3

Views: 5838

Answers (2)

woolm110
woolm110

Reputation: 1204

I finally found a solution so I thought I'd share.

To start with it turns out I was editing an old index file so any changes weren't taking affect. Once I realised this I noticed I was including cordova.js twice, once in the head and once below the body, this was causing the following error to occur 

module org.apache.inappbrowser does not exist

I removed this but still couldn't get the plugin to work, I used the CLI to add and remove the plugin several times but still no joy.

After hours of digging I realised I had old redundant plugin code in several different directories, I deleted all plugins from the following directories, along with the android.json file:

[my_project]/plugins
[my_project]/platforms/android/src/org/apache/cordova/inappbrowser
[my_project]/platforms/android/cordova/plugins/
[my_project]/platforms/android/assets/www/plugins

Once I had removed all this I then added the plugin

cordova plugin add org.apache.cordova.inappbrowser

This appears to have fixed everything for me so hopefully it'll help someone else!

Upvotes: 1

Jason Lewallen
Jason Lewallen

Reputation: 101

I suggest changing

iabRef = window.open(url, '_blank', 'location=yes,EnableViewPortScale=yes');

to

iabRef = window.open(url, '_blank', 'location=yes,enableviewportscale=yes');

You might also want to add this to your projects config.xml (although it might be a iOS specific thing):

<preference name="EnableViewportScale" value="true"/>

Upvotes: 4

Related Questions