I want to have only one view in my iOS phonegap app.
This view will be a web page.
How can i load this only view with a specific url?
I suppose you do that through javascript and if yes how?
*I am not an html/javascript scripter , i only develop native iOS applications , but i need to test something with phonegap.
d0nparalias,
If you want to load main(Cordova's) index.html from remote server, edit config.xml file and change
<content src="index.html" />
to
<content src="http://192.168.1.4:8080/www/index.html" />
for example. And it will load index.html from web server located on 192.168.1.4.
If you want to open a website right after loading your app, you can use InAppBrowser as you have already noticed.
window.open(url, target, options);
Here you have options for target (according to Cordova docs 2.5.0):
2.1. _self and you'll get something likeNote, that you don't have any controls to return to your index.html in this case.
2.2. _blank — presents modal view controller with dismiss button
2.3. _system — opens in Safari.app
For more information visit documentation and wiki.
Hope it helps.
BR.
Eugene
PhoneGap which is now called Apache Cordova on iOS will only let you use a file URL by default. This means you have to load a local .html file. If you want to open a remote page with an http:// URL, you'll need to add custom native code to tell the WebView to load a remote URL.
Related
I have a Cordova application that waits for the deviceready event and, when that event fires, sets the window.location.href to a remote site, say, http://foo.bar.com/lander.html. From that page, I have several links to other pages - say page1.html and page2.html. I want to put a button in page1.html that calls Cordova's navigator.notification.vibrate function.
I have the above set up and everything appears to work, except that navigation.notification is undefined when I click the button in page1.html to try to get the device to vibrate. I have copied cordova.js onto foo.bar.com and am referencing it from page1.html. Do I have to include other javascript source files on foo.bar.com? Will this approach ever work?
Would it work if instead of changing the window location I were to get the content by AJAX and put the content in a div container in the index.html page that underlies the Cordova app?
This is all on iOS if that matters. I included the dialogs and vibration plugins only. I am receiving the deviceready event in the Cordova app and successfully redirecting to the remote site. Please let me know if there are other factors which I need to take into consideration. Thanks.
UPDATE 1: I got vibration working from the Cordova app's local index.html by using navigator.vibrate instead of navigator.notification.vibrate. Changing this on the remote site did not help. I also tried including copies of vibration.js, Cordova.js and cordova_plugins.js from the remote page - still no luck.
UPDATE 2: I found in the Cordova docs where what I'm asking about is discussed: Invoking Cordova JavaScript functions from a remotely-loaded HTML page (an HTML page not stored locally on the device) is an unsupported configuration. This is because Cordova was not designed for this, and the Apache Cordova community does no testing of this configuration. While it can work in some circumstances, it is not recommended nor supported. There are challenges with the same origin policy, keeping the JavaScript and native portions of Cordova synchronized at the same version (since they are coupled via private APIs which may change), the trustworthiness of remote content calling native local functions, and potential app store rejection.
The display of remotely-loaded HTML content in a webview should be done using Cordova's InAppBrowser. The InAppBrowser is designed so that JavaScript running there does not have access to the Cordova JavaScript APIs for the reasons listed above. Please refer to the Security Guide.
Based on this, it sounds possible but like we'd be out on our own. Still, if anybody is successfully doing this, we'd like to give it a try.
I thinhk what you are looking for is a push notification. There is a plugin for this.
http://ngcordova.com/docs/plugins/pushNotifications/
You need a task running on your app though.
Hope this is helpfull.
I am beginner to phonegap. I want to create layout inside index.html which is driven by javascript and also having cordova to use apis in app. I am able to run hard coded index.html but I want to run as a live site inside phonegap and also want to use cordova plugins inside my live site.
Can anybody help me or any idea to how I use live site or dynamic html through javascript?
Thanks in advance,
Vijay Barnwal
You can load a live website by any of these 3 methods:
Embed an HTML iframe <iframe src="http://example.com"></iframe>, for this to work, you will need to enable Cross-Origin Resource Sharing on your device and on your web server. Read Cordova 3.5.0 Whitelist Guide and for server, I want to add CORS support to my server.
Use metatag to redirect the user to the desired URL.
<meta http-equiv="refresh" content="0; url=http://example.com/" />
If you still need to use all the Cordova functions and plugins, the only way to do it is by loading the website using AJAX into a <div> tag. Read: Ajax/jQuery - Load webpage content into a div on page load? Note: You still need to enable CORS for this to work.
I have the following requirement for my application (Android, iOS):
When the application launches it displays a login.html page (which is part of the application). After logging in, the application's webview should be occupied with home.jsp from an external domain. When user clicks on logout button in home.jsp it has to navigate back to login page . On click of logout when we usewindow.location.href="login.html" then it tries to find the page on xxx domain.
Is there a way to detect this navigation URL and override the URL from javascript or phonegap properties in the application?
When I inspect window.location.href in an android emulator I get file:///android_asset/www/index.html
But I think Nathans idea of moving it to the server is a good one. You could also have one on the device if you really need to. (PErhaps you should ask the person specifiying the app achitecture how they would do it :) )
The answer is going to vary depending on how you've implemented the mentioned WebView where home.jsp is being displayed in. You did not provide any code or any specific information so the answer is going to be the same - somewhat vague...
If you've opened a new WebView, then you can't control it from JavaScript. You'll need to control it via Java or Objective-C code (you did not mention which environment you're developing for...).
For example, if you'll look in the your-app\android\native\src\com\your-app\your-app.java file, you'll see how the native layer loads the application's index.html file after the Worklight JavaScript framework has been loaded.
Similarly, you could re-use this approach in your own application to close and re-load login.html.
If you're in fact doing the mentioned re-direct from the comments, meaning you're re-using the current webview but replacing its content with external content, then I think it is expected that you've lost the context of the application, and when looking for login.html - it doesn't find it... because you've moved from app-context to web-context. They do not know each other.
I think you should not do this re-direct. Instead, you need to open a new WebView using a Cordova plug-in, and in this new WebView to display your external content.
In this Overlayed WebView, you can detect any urls that are clicked on and if the sign-out URL was detected, then close the WebView.
You can see parts of this in action in the Integrating server-generated pages in hybrid applications tutorial and accompanying sample project.
In the sample project, you can see the functions provided (where you can add yours) in android\nativeResources\src\com\IncludeExternalPages\IncludeExternalPages.java.
I have an app made with Phonegap.
For a certain feature, sometimes I need to load a webpage/ site into the app - for this, i use an iframe.
The iframe always displays the desktop version of the webpage though, even when I know the page has a responsive design.
Is there a way to force the iframe to load the site as a mobile?
You should use the InAppBrowser plugin to open up an external web page. This is going to be much safer since the foreign page won't have access to your Cordova instance. (If I have a third party page, and you load my page into your app through an iFrame, I can easily "hack" your application and steal user data, run arbitrary Cordova commands, etc.)
Additionally, when using the InAppBrowser, you can tell the browser to open any links in the current Cordova WebView, so that external site will just appear in your app. I don't know what your external site looks like, but this might be what you want to do. You can accomplish this by setting the target as _self, like this:
var ref = window.open('http://apache.org', '_blank', 'location=yes');
www.mark??z.se/test
Remove the: ??
It is only 4 files:
index.html
appIcon.png
startup.PNG
SMS_2.jpg
How can i make this to an offline app, is it possible?
The CSS and all JS are in the html file.
Read about creating offline web apps here:
http://diveintohtml5.ep.io/offline.html
The iPhone Safari browser supports offline web apps. You need to:
modify the webpage to reference a cache.manifest file
create a cache.manifest file listing the resources that need to be downloaded
configure your web server to serve the cache.manifest file with the proper content type
I used this reference (among others) to create an offline GWT web app. iPhone/Safari can "bookmark" the website by using "Add to Home Screen" so it looks like an iphone native app.
Good luck.
The UIWebView
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html
is capable of displaying html content that has javascript and css associated with it. I should be possible to include your files as part of the app's bundle and have the UIWebView load them. Have a read through that class reference and sample code to see if it suits your needs.
in a desktop pc, be shure every resource is boundled with the html file, css inlines, js inlines, images encoded in css via url('data:image')
#see http://en.wikipedia.org/wiki/Data_URI_scheme
and associate a browser to html files, doubleclick on the page will open your page.
also chrome has a "create application shortcut" that will make an even more "native" frame around your html5 app.
prism https://wiki.mozilla.org/Prism is the same concept implemented with mozilla engine.
in mobile browsers based on webkit there are similar means to exploit, i.e. for iPad you can create shortcuts in the home screen that will look exactly like a native application and access a 5Mb of file cache(http://www.html5rocks.com/tutorials/appcache/beginner/).