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.
Related
I'm working on an html file in a google apps script project right now and I want it to be able to retrieve the html content of a web page, extract a snippet, and paste the snippet to the page. I've tried using fetch() and a couple of its options (mostly CORS), but I either get nothing back or an error that says "No 'Access-Control-Allow-Origin' header is present on the requested resource." A workaround I found was using google.script.run.withSuccessHandler() to return the html content via UrlFetchApp.fetch(url).getContentText(). The problem with this is that it is time consuming and I want to try and optimize it as much as possible. Does anyone have any suggestions on how to make this work or will I be forced to stick with my workaround?
Using "Vanilla JavaScript" in a Google Apps Script web application might not work to
retrieve the html content of a web page, extract a snippet, and paste the snippet to the page.
The above because the client-side code of Google Apps Script web applications is embedded in an iframe tag that can't be modified from server-side code. In other words, Google Apps Script is not universally suitable web development platform. One alternative is to use another platform to create your web application, i.e. GitHub Pages, Firebase, etc.
Related
Where is my iframe in the published web application/sidebar?
I have a website in place and I would like to load it into a webview giving the site a native feel.
Now, this is fairly simple to do using window.location='url' but when the site loads the javascript on the site is not able to access plugin apis. So it seems the site is running within a sandbox... unable to access cordova apis.
Is there a way to provide an externally loaded website access to the cordova apis?
I load my external site using <content src="http://myurl"/> in my config.xml
Yes, you can do it. Upload all the cordova.js and plugin files from the project to your server, then in the pages on your server just include it. Be sure to keep them in the same relative folders as they are in the project.
<script type="text/javascript" src="cordova.js"></script>
(Note that I have done this on versions 3 to 5, but not in 6 yet.)
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 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.
I am currently writing a simple application using PhoneGap (iOS) and running it in the simulator. The problem is that external URLs seem to refuse to load. For example using a CDN for jQuery
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>
Will not make $/jQuery available. The same problem is happening for weinre when trying to use it. Is there something I need to change to enable this to work?
Have you added the domains of the external links to the ExternalHosts entry in PhoneGap.plist ?
There is a fairly new whitelisting system in PhoneGap that is causing a bit of confusion with external links
From - http://wiki.phonegap.com/ :
"Also, the latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well)."