Loading remote html in PhoneGap or Cleaver (Cordova) on iOS

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

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.

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.

来源：https://stackoverflow.com/questions/14818138/loading-remote-html-in-phonegap-or-cleaver-cordova-on-ios

标签

ios

cordova

uiwebview