7

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)?

mpatel
  • 476
  • 3
  • 13
Sam YC
  • 10,725
  • 19
  • 102
  • 158
  • Can you provide some Code? – mpatel May 18 '13 at 13:02
  • Have you tried an iframe? – Tasos Bitsios May 19 '13 at 00:36
  • @TasosBitsios iframe is not what I want, for example, I want to use a customized dialog component (a div container) across all the page, I do not want to copy the HTML content across all the page, so how can I do? – Sam YC May 20 '13 at 06:36
  • Have you tried having your dialog component in a separate html file (all the HTML markup, etc) and then loading that via jQuery (.load())? – ZombieCode May 21 '13 at 02:38
  • @Ekaterina Based on my research (Sorry I haven't tried yet, gonna try it soon), jQuery.load() doesn't allow to load local file right? – Sam YC May 21 '13 at 02:41
  • It does allow local files. Give it a whirl! – ZombieCode May 21 '13 at 03:01
  • have you thought of web components? This doesnt work natively at the moment, but with google's Polymer.js library it works today. Web components are basically what you want, reusable building blocks for the web – pfried May 21 '13 at 05:52
  • "I want to use a customized dialog component (a div container) across all the page" - have you considered just using a template library for this? – Myrne Stol May 25 '13 at 15:12

3 Answers3

4

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.

Community
  • 1
  • 1
mpatel
  • 476
  • 3
  • 13
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/.

Clayton Rabenda
  • 5,229
  • 2
  • 19
  • 16
  • Hi, I have tried this method in Web browser, we will have Same Origin Policy issue if we try to ajax retrieve a local file. Since phonegap focus on local file, by using ajax, we will have the same issue right? – Sam YC May 22 '13 at 03:41
  • If you are developing on your local machine you'll need to run and http server to serve the files. OSX comes with apache, which is what I use, but it's a bit difficult to configure. You can use some sorta LAMP thing or just go to the folder containing your htmls and run "python -m SimpleHTTPServer". SimpleHTTPServer sometimes misses requests but it works. – Clayton Rabenda May 23 '13 at 16:32
-1

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

Tyron
  • 1,938
  • 11
  • 30