9

I am using an Cordova 2.4 component Cleaver and an embedded view in my native iOS 6 application. So far I have managed to create the project structure, link the Cordova libraries and set up the Hello World app that does work providing "Device Ready" feedback.

This is all great but it loads all html from the www repository distributed inside the app itself (including all js libraries).

What I really want yo do is this:

1 - popup the cleaver component (which is nothing else than an embedded uiwebview) in my app. Easy - done.

2 - load some html content from a URL pointing to a servlet on my remote server. I have several servlets and need to be able to load each one of them separately of course.

3- have the content generated in step 2 interact with my native app via the cordova javascript libs cordova-2.4.0.js - (how do I load these if they are local to device but html was loaded from remote location).

How can I set this up ?

P.S.

I am more of Obj-C than Javascript developer :)

Moonwalker
  • 3,462
  • 4
  • 25
  • 31

2 Answers2

10

Here is the answer. What a joy...

excellent article on dynamic page loading in PhoneGap and Cordova

Precisely what I needed. The second part of the project was to enable native code to force the loading of external web services - I accomplished this by called stringByEvaluatingJavaScriptFromString on the Cleaver web view .

[webview stringByEvaluatingJavaScriptFromString:@"app.loadExternal('www.usatoday.com')]; is the code that works like a charm:)

Viola - I have a Cleaver view capable of loading external html content with complete two-way communication between the javascript app and the native container.

Tamil Selvan C
  • 19,913
  • 12
  • 49
  • 70
Moonwalker
  • 3,462
  • 4
  • 25
  • 31
8

Inside your index.html file do something like this (for the point 2)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript">
     function onBodyLoad(){     
        document.addEventListener("deviceready", onDeviceReady, false);
     }
     function onDeviceReady(){
         window.location.href = <your_remote_url>
     }
}
</script>

For the point 3, your remote content should import cordova.js and the interaction (native / web) will work as if it was local content.

oiledCode
  • 8,589
  • 6
  • 43
  • 59
  • Thanks elio.d but not exactly was I was looking for. I have tons of servlet services that I need to invoke dynamically and load their content into the view - so hardcoding like this will not work. I also do not want to host the cordova.js on the server side. I did find the answer and a solution. It is all in dynamic content loading via Ajax with the hosting page and cordova.js staying local but the content div being loaded on demand from the servers...works quite nice. – Moonwalker Feb 12 '13 at 12:52
  • 2
    for some reasons it opens in new window not on the original application window any ideas? – Abdessamad Doughri Nov 11 '15 at 11:58