Phonegap How To Reuse/include Html Page?

I know in server side,this can be done easily by the server side script,but PhoneGap development focus is on the local copy.So how could I reuse/include a HTML page into another HT

Solution 1:

You can use many good libraries available while developing an application using PhoneGap.If you are aware of jQuery Mobile library.Using this library you can include multiple html pages into one single page.I am PhoneGap developer.I have developed single page application using this jQM library.

They worked on the Ajax navigation.So,no page reloading at the client side.This will make your app performance dramatically.You have HTML5 localStorage.Store all the data in one ajax hit and navigate through multiple pages.

Here is the link: jQuery Mobile

Additionally you can use pager.js library to load multiple HTML pages into one single page.It's very easy to learn.

Hope this will help you.

Solution 2:

You could fetch it with an ajax request and then insert into your page. I use angular.js and this is what it does behind the scenes... You might prefer something simpler like jquery's load function: http://api.jquery.com/load/.

Solution 3:

Loading content via Ajax is the better solution, but JSONP would be an alternative way to loading content with Ajax. JSONP doesn't cause same origin policy issues.

Place your HTML code in a JS file that you load and display via script-tag. E.g.:

JSONP-File:

var dialogComponentHTML = "<form>your html code...</form";
$(document).ready(function() {
   $("#your_placeholder").html(dialogComponentHTML);
});

HTML-File:

<script type="text/javascript" src="dialog.jsonp">
<div id="your_placeholder"></div>

See also http://en.wikipedia.org/wiki/JSONP