CODEWITHSUNDEEP
cordova
lars1595
lars1595

Reputation: 925

Cordova multiple Html files

In my Cordova app the index.html redirects to main.html when I get the onDeviceReady event. But I can't use any plug-ins in the main.html. Do I need to enable something in Cordova for main.html to work?

Upvotes: 4

Views: 10635

Answers (4)

user3255670
user3255670

Reputation:

Every time you load a new page, you start over again in the App process. This means, if you load a new page, you must again wait for the deviceready event.

In short, everything you did in index.html, must be repeated in main.html. This is the reason people are say you should go with an SPA (Single Page App).

However, the reasons they are giving you are poor. In short, they are lazy thinkers - not lazy programmers. Multiple page apps are valid, however you must think it through. If you have questions on this, please ask.

On deviceready please read section #4 In the code, did not listen for the 'deviceread' event.
Top Mistakes by Developers new to Cordova/Phonegap

Upvotes: 4

Sheik
Sheik

Reputation: 9

This might help someone who is still facing this issue. Add this plugin to your app, https://github.com/TruckMovers/cordova-plugin-remote-injection

This would inject cordova and other plugins into any remote HTML

Also you could place onDeviceReady in a separate JS file and include it with, in config.xml

Upvotes: 0

Sam
Sam

Reputation: 960

There's something you should be aware of when reading the suggestions given to make a single-page app: you may still run into the need to load another page.

This is because of a cordova timeout error I myself ran into recently where you get a timeout error message and the app crashes. The commonly known fix for this is to make the launch page for the app different from the actual app page. So, for example, you might have your entire app running on app.html, but first you need to have cordova start with loading.html and then redirect to app.html.

To answer your question, you need to move or add your onDeviceReady event to the other html file. Having a single-page app would definitely help bypass that problem (if that's the kind of app that works for you), but either way there's a chance you'll need to add that extra page to fix the timeout issue, depending on what your app logic does. It might not happen to you but I thought you should be aware of it. (The loading.html page does not need to have any onDeviceReady events, by the way; it literally can be just a single line script in the body that redirects to your app page).

Upvotes: 1

Simon Prickett
Simon Prickett

Reputation: 4148

Avoid using multiple html files, keep the Cordova application "on the same page" by having other content in other HTML files or template fragment files, and loading these in via Ajax / Javascript to a div in your index.html that is the "cur. You might want to consider a templating engine such as Handlebars, depending on which JavaScript framework(s) you are using to build your app other options may be more attractive. Example project on Github that I have that uses this approach can be found here.

Upvotes: 1

Related Questions