CODEWITHSUNDEEP
javascripthtmlcordova
Sam YC
Sam YC

Reputation: 11617

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 HTML page (without violent the Same Origin Policy)?

Upvotes: 7

Views: 7725

Answers (3)

mpatel
mpatel

Reputation: 486

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.

Upvotes: 4

Tyron
Tyron

Reputation: 1976

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

Upvotes: -1

Clayton Rabenda
Clayton Rabenda

Reputation: 5219

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/.

Upvotes: 2

Related Questions