I've grabbed the latest version of phonegap from NPM and installed it. I created a new project and added the InAppBrowser plugin per the docs on the PhoneGap . I then make a JavaScript call from my webapp but I never see the alert I have coded below nor do I see it with any breakpoints I have setup in Xcode for the plugin.
Here's the code for the JS:
var pdfViewer = {
loadPdf: function(record, successCallback, errorCallback) {
var filename = record.get('building') + "-" + record.get('floor') + ".pdf";
var url = People.app.srvcUrl + Global.floorPlanUri + filename + "?access_token=" + People.app.bearerToken.access_token;
if (Ext.os.is.iOS) {
// cordova.exec(successCallback, errorCallback, "PDFViewer", "loadRemotePdf", [url, filename]);
var ref = window.open(url, '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert("You made it!"); });
} else {
window.open(url, '_system', 'location=yes');
}
}
};
What happens is that the url is launched to show a PDF on top of my existing app with no alert and no location/close button. Any ideas why InAppBrowser is not being used? I need to have it show in a window with a close button.
Here's the output I see in Xcode when I run the app:
2013-10-23 09:39:02.380 mobile-xxx-ios[3302:60b] Multi-tasking -> Device: YES, App: YES
2013-10-23 09:39:02.426 mobile-xxx-ios[3302:60b] Unlimited access to network resources
2013-10-23 09:39:02.564 mobile-xxx-ios[3302:60b] [CDVTimer][phonedialer] 0.477016ms
2013-10-23 09:39:02.567 mobile-xxx-ios[3302:60b] [CDVTimer][sms] 0.230014ms
2013-10-23 09:39:02.569 mobile-xxx-ios[3302:60b] [CDVTimer][emailcomposer] 0.252008ms
2013-10-23 09:39:02.571 mobile-xxx-ios[3302:60b] [CDVTimer][TotalPluginStartup] 7.416010ms
2013-10-23 09:39:02.957 mobile-xxx-ios[3302:60b] Resetting plugins due to page load.
2013-10-23 09:39:05.789 mobile-xxx-ios[3302:60b] Finished load of: file:///var/mobile/Applications/5916FB20-FDEC-40A7-AE77-9EF14AF30585/mobile-xxx-ios.app/www/index.html
2013-10-23 09:39:18.168 mobile-xxx-ios[3302:60b] Resetting plugins due to page load.
2013-10-23 09:39:18.680 mobile-xxx-ios[3302:60b] Finished load of: https://pdfs.xxx.com/noauth/plans/x-1.pdf
FAILED to create agar for HelveticaLTMM.
FAILED to create agar for TimesLTMM.
Here's my config.xml:
<widget xmlns = "http://www.w3.org/ns/widgets"
id = "io.cordova.helloCordova"
version = "2.0.0">
<name>Mobile App</name>
<description>
Mobile Phonegap Application
</description>
<access origin="*" subdomains="true"/>
<content src="index.html" />
<!-- Preferences for iOS -->
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="UIWebViewBounce" value="true" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="EnableLocation" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="OpenAllWhitelistURLsInWebView" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<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" />
<feature name="SSLSelfCertOverride">
<param name="ios-package" value="SSLSelfCertOverride" />
</feature>
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage"/>
</feature>
<feature name="PhoneDialer">
<param name="ios-package" value="PhoneDialer"/>
<param name="onload" value="true" />
</feature>
<feature name="Sms">
<param name="ios-package" value="Sms"/>
<param name="onload" value="true" />
</feature>
<feature name="EmailComposer">
<param name="ios-package" value="EmailComposer"/>
<param name="onload" value="true" />
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
<feature name="PackageInfo">
<param name="ios-package" value="PackageInfo" />
</feature>
<feature name="PDFViewer">
<param name="ios-package" value="PDFViewer" />
</feature>
</widget>
RickCase
Please check the followings:
STEP 1
In your "platforms/ios/www/plugins/", is there a "org.apache.cordova.inappbrowser" dir? If the answer is no, it's not successfully added.
Solution: Create dir "org.apache.cordova.inappbrowser/www/", and put "InAppBrowser.js" in it. You can find it in your PhoneGap project root "yourproject/plugins/org.apache.cordova.inappbrowser/www/". Then go to step 2.
STEP 2
Open "platforms/ios/www/cordova_plugins.js". In "module.exports", add:
{
"file": "plugins/org.apache.cordova.inappbrowser/www/InAppBrowser.js",
"id": "org.apache.cordova.inappbrowser.InAppBrowser",
"clobbers": [
"window.open"
]
}
In "module.exports.metadata", add:
"org.apache.cordova.inappbrowser": "0.2.5"
and Save. "0.2.5" is the version of plugin, can be found in plugin.xml. (Looks like this number does not matter.)
Then run it, open your inspector and check if "InAppBrowser.js" is successfully added into the head tag.
Note: manually adding "InAppBrowser.js" into head tag without modifying "cordova_plugins.js" will not work. If answer to 1 is yes, go to step 2 directly.
Hopefully this solves your problem.
Check that your config.xml has these things:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>HelloWorld</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<feature name="http://api.phonegap.com/1.0/device" />
<preference name="phonegap-version" value="3.1.0" />
<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 gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
<gap:splash gap:density="ldpi" gap:platform="android" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:density="mdpi" gap:platform="android" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:density="hdpi" gap:platform="android" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:density="xhdpi" gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.3" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.1.0" />
<access origin="http://127.0.0.1*" />
<access origin="*" />
<content src="index.html" />
</widget>
I've resolved this issue by using the Cordova CLI commands exclusively to create the project and then to add the plugins. It seems you have to use their build commands to get everything moved into the right directories. Now I just issue a cordova build and that will build for iOS and Android with the appropriate plugin files in the correct spot.
I've also modified the generated js/index.js to call my Sencha Touch app as follows:
var device = false;
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
try {
device = true;
People.app.mainLaunch();
}
catch(e) {
alert("Error: " + e);
}
console.log('Received Event: ' + id);
}
};
And then in my Sencha Touch app, I create I modified my launch method to prevent a race condition between my ST app being initialized before PhoneGap starting up as follows:
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
try {
if (this.launched && device) {
Ext.Viewport.add({xtype:'myApp');
}
}
catch(e) {
alert(e);
}
},
来源：https://stackoverflow.com/questions/19530598/inappbrowser-not-being-called-in-phonegap-3-1-0