I am using cordova 2.1.0 for IOS/app development. I want to make only one index.html for both IOS and android. So, i wanted to include the following statement for android and exclude for IOS in index.html :-
<script type="text/javascript" src="iscroll.js"></script>
What is the condition i should give such that this statement runs for android and skips for IOS.
Thanks in advance.
device.platform allows you to filter content based on platform.
function init() {
if(device.platform =="Android"){
$("script").attr("src", "iscroll.js").appendTo("head");
}
document.addEventListener("deviceready", onDeviceReady, false);
}
Related
I have a single page in my phonegap app , that i want to redirect to an external page after some seconds , but it keeps redirecting outisude the app.But i want it to open in the app
Here is my code
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the Codova API
setTimeout( window.location="http://www.autojosh.com" , '7000') ; }
</script>
I have tried almost everything i know its not working please help
If you want to open the link inside your app, first of all, you need to install InAppBrowser plugin:
cordova plugin add cordova-plugin-inappbrowser
when you have the plugin, the following code will open the page in a new window inside the app.
window.open('http://your-page.com', '_blank', 'location=no,hidden=yes,toolbar=no');
Not for OP since this is so old, but for anyone looking for the same, the way to enable navigation to external URLs inside the main webview is by adding the following to the config.xml file:
<allow-navigation href="https://*/*" />
Set https or http accordingly.
Unlike with the InAppBrowser, this way the page can access the Cordova API, if you upload and include the JS files for the platform you're using.
I developing an app for iOS and Android using PhoneGap 3.4.0 from the command line interface, and want to make use of the BarcodeScanner plugin. The problem is that the scanner does not actually do anything when called by my app. The camera does not come up. By using console.log with Safari developer tools, I can tell that the scan function does exist and is getting called... it just isn't doing anything.
I installed the scanner plugin like this:
phonegap plugin add https://github.com/wildabeast/BarcodeScanner
In the index.html, included the javascripts like this:
<script src="phonegap.js"></script>
<script src="barcodescanner.js"></script>
In config.xml, added this:
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
When I set scanner variable like this it logs that there is a BarcodeScanner, and it does have a function scan, but then when I call the function scan nothing happens. (the camera does not open).
var scanner = cordova.plugins.barcodeScanner;
console.log(scanner) // => BarcodeScanner
This is how I'm calling the scan function:
scanner.scan( function (result) {
... my code here...
} );
Any ideas? I'd really appreciate any help or pointers in how to get the barcodeScanner to work with PhoneGap.
I´m having the exact same problem.
After I updated my App to support arm64 (iPad Air), I ran into this issue.
A work-a-round:
Push the hardware On/Off button.
Turn on the device again.
Try starting the barcodeScanner.
This worked for me - but the App will not leave my desk before the issue has been fixed properly.
The issue now exists on all of my devices (iPad Mini, iPhone 4S, iPad Air).
The problem was that the version from wildabeast was not compatible with PhoneGap >= 3.2.0.
Use this branch instead: https://github.com/phonegap-build/BarcodeScanner
Install with
phonegap local plugin add https://github.com/phonegap-build/BarcodeScanner
To get it to work, I had to create a brand new app, copy the www folder over, and then install the plugin.
I am very very new to phonegap android app developing. I have configured everything after huge trying. Now I am learning to coding in phonegap.
Recently I got a javascript code for phonegap. which should display an alert notification. But it is not showing . It only shows html codes results. My code is below
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.2.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",
onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
First check if you have included the right permissions in app/AndroidManifest.xml
If it doesn't works try with this:
function onDeviceReady(){
$(document).ready(function(e) {
navigator.notification.alert("PhoneGap is working!!");
});
}
You should check docs for 2.2.0
By the other hand I recommend you tu use a newer phonegap version.
Ok.. Here are some points that you need to check:
Make sure you have included cordova-2.2.0.js file in your application
folder.
Make sure you have mentioned the correct cordova file name in your
tag. For ex., if you have included cordova-3.0.0.js in your
application folder. You should mention the same file name in your
script tag.
You can try placing the onDeviceReady() function before the onLoad()
function and check whether it makes any impact. Try placing a
console.log() in the deviceready function.
I have this simple Titanium js script.
app.js
var win = Ti.UI.createWindow();
var webview = Ti.UI.createWebView({
url: 'logging.html'
});
webview.addEventListener('help',function(){
alert('help');
});
win.add(webview);
win.open();
logging.html
<html>
<body>
<a onclick="Ti.App.fireEvent('help')">Help</a>
</body>
</html>
when I click on the Help link, the console gives me Reference Error: Ti is not defined.
I also tried changing Ti with Titanium, but same error.
------------- EDIT ----------
this error comes only with web browser. iOS works perfectly. but
when titanium studio compiles the project for web mobile, I can see titanium.js and TI/* folder, so I guess it can't load Ti object. can anyone explain me why?
I found a solution!
simply add to all of your html pages the simple script below
var Ti = window.parent.Ti
have fun!
EDIT:
from sdk version 3.0.2GA on, I guess they fixed it. now it calls Ti sdk without that hack!**
First, change:
webview.addEventListener('help',function(){
alert('help');
});
To:
Ti.App.addEventListener('help',function(){
alert('help');
});
And second: Call "Ti.App.fireEvent()" without the final "s" in your HTML file.
after some tests, I found that the previous code works perfectly on iOS phisical device/simulator and Android.
it doesn't on android web browser emulator and normal mobile browser (Firefox as mobile web app)
so, it seems that Titanium api calls will never work on web browsers because of "normal javascript library doesn't have Titanium.* or Ti.*".
I used this and it worked
window.parent.TiApp.fireEvent
I'm trying to dynamically load the phonegap javascript file (so that I can choose not to load it in debug mode when I'm using Ripple) but I'm running in to some issues.
I load the jquery and jquerymobile javascript libraries using a normal script tag. In another script block, I do:
function onDeviceReady() {
alert("Device Ready!");
}
$(document).ready(function() {
alert("doc ready!");
$.getScript("js/phonegap.0.9.5.1.js", function() {alert("Got Phonegap!");});
document.addEventListener("deviceready", onDeviceReady, false);
});
This code alerts that it "Got Phonegap!" but never alerts "Device Ready". Using jsconsole.com, I can see that the PhoneGap javascript object exists. However, trying to call device.uuid (or other simple phonegap API calls) fails. It's almost like PhoneGap didn't fully initialize. Doesn't seem like that should be the case though. Am I missing something? Thanks!
Finally I got it working without using any external library.
THE PROBLEM
For a multiplatform Phonegap project, two are the parts that differ from one platform to another:
The encapsulating project
The Javacript Phonegap file.
Those encapsulating projects typically do not change much over the course of the project. It would be desirable to have a single HTML5 codebase that one could directly paste (or using build scripts) onto the platform-dependent projects. Since the javascript phonegap library is inside the set of web files, it's really painfull to replace the correct file each time.
MY SOLUTION
In my project I have several cordova files, one for each target platform:
cordova.android.js
cordova.ios.js
cordoba.bb.js
...
(Notice how every one of these files is included in the app even if it is not used. For me it's not a problem, since the scripts are bundled in the app and only the one for the correct platform is loaded to memory).
In my pages, instead of a script tag for phonegap, I placed the loader module:
<script src="phonegap-loader.js"></script>
And this would be the phonegap-loader.js script. I make use of user-agent detection to dynamically and synchronously load the script:
(function(){
var useragent = navigator.userAgent;
if(/Android/i.test(useragent)){
loadScript('cordova.android.js');
} else if((/iPhone/i.test(useragent)) || (/iPad/i.test(useragent))){
loadScript('cordova.ios.js');
}
...
// Else desktop browser is assumed and no phonegap js is loaded
function loadScript(url){
// synchronous load by #Sean Kinsey
// https://stackoverflow.com/a/2880147/813951
var xhrObj = new XMLHttpRequest();
xhrObj.open('GET', url, false);
xhrObj.send('');
var se = document.createElement('script');
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);
}
})();
Its really important to load the script SYNCHRONOUSLY. This gave me innumerable headaches. Before realising this I tried adding scripts tags at the bottom of the head, and using $.getScript, but none worked, since ondeviceReady was not fired. Looks like the only valid approach to ensure the Phonegap script is executed when loaded dynamically is the one shown in this amazing answer by #Sean Kinsey (all kudos to him).
The only drawback is that the script is inlined, but for me is a cheap price to pay for having the core HTML5 app finally isolated from the containers.
I was facing the similar issue where in which I need to load the PhoneGap and dependent plugin files based on the platform type. I went through the PhoneGap source and found that it uses the windows/browser events to load and prepare the objects. If I call the browser events manually then it initializes the PhoneGap objects (API and Plugins) I needed to run my application.
The following code which is using Yabble has worked for me now:
<html>
<head>
<script
src="https://raw.github.com/jbrantly/yabble/master/lib/yabble.js"></script>
<script>
require.setModuleRoot("js");
require.useScriptTags();
require.ensure([ "jquery", "phonegap" ], function(require) {
// Trigger PhoneGap Initialization
PhoneGap.onPhoneGapInit.fire();
// Load PhoneGap Plugins
require.ensure([ "plugin1" ], function() {
$("#console").append("Plugin1 loaded<br>");
});
// Both following functions will work only if PhoneGap is loaded/initialized and Plugin is successfully registered
// Check PhoneGap device object
$("#checkDevice").click(function() {
console.log(JSON.stringify(device));
});
// Call Native Plugin
$("#callPlugin").click(function() {
window.plugins.plugin1.call();
});
});
</script>
</head>
<body>
<div id="console"></div>
<input type="button" id="checkDevice" value="Check Device">
<input type="button" id="callPlugin" value="Call Plugin">
</body>
</html>
Both Device info and Plugin calls is working fine on Android. Although I have not checked all the PhoneGap API but as of now I need only these two to work and they are working.
Edit
In Phonegap 1.5/Cordova, PhoneGap.onPhoneGapInit.fire(); is not available due to API change. In my current test most of the required objects are available without any change after loading the JS dynamically. Updated test is available at this gist - Cordova Lazy Load Test
1) have you tried calling addEventListener before getScript ?
2) also, do you use the correct phonegap.js for your device ? (when using iphone phonegap.js on android i had the same 'silent' behaviour)
The deviceready event is a special event handled by code in phonegap.js by duck punching document.addEventListener so phonegap.js has to be loaded before you can attach an event to deviceready.
Try this:
function onDeviceReady() {
alert("Device Ready!");
}
$(document).ready(function() {
alert("doc ready!");
$.getScript("js/phonegap.0.9.5.1.js", function() {
alert("Got Phonegap!");
document.addEventListener("deviceready", onDeviceReady, false);
});
});
I was able to simulate correct PhoneGap initialization workflow after injecting it dynamically by running the following javascript code right after injecting phonegap.js script.
if (document.readyState == "complete") {
PhoneGap.onDOMContentLoaded.fire();
}