How to load new pages generated server-side into a PhoneGap or Cordova app?
Question
I'm trying to figure out the easiest and quickest technique to adapt our company's website to an app that can be downloaded from the app stores. PhoneGap/Cordova looks the way to go. Using the InAppBrowser plugin looks like an obvious route but we're going to need access to some phone APIs via Cordova plugins and there seems no way to access data from them in the InAppBrowser (Webview?) window.
As an alternative I'm wondering why can't I simply replace the HTML content directly in my PhoneGap page (effectively a single page app) with new HTML page content loaded from our server? We're using Laravel templates server-side, so there is already a page wrapper into which Laravel injects page-specific content (on the server) before sending to the client. I could just move the page wrapper HTML to the front end (into the SPA compiled into my PhoneGap app) complete with all the JS and CSS needed across all pages, and then just live load new page content into the DOM (eg in the page BODY), and any JS would have access to phone APIs via Cordova plugins.
Is this feasible, or am I missing something? (any gotchas?)
Thanks.
1 answers
solution1
1 ACCPTED 2018-10-30 16:40:41
You can use something like this
in your serveur create page home.php like this :
<?php
header('Access-Control-Allow-Origin: *');
header("content-type: text/javascript");
if(isset($_POST['home']))
{
$content_html = '<head><title> Test </title></head><body><span>working</span></body><script>declare all necessary script hear</script>';
echo json_encode($content_html);
}
?>
in cordova index.html
<html id="new_content">
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#new_content').html("<center><span>Loading ...</span></center>");
$.ajax({
type: "POST",
url: "http:/your_serveur/home.php",
data: {"home":"home"},
cache: false,
async:false,
success: function(data){
var data = JSON.parse(data);
$("#new_content").html(data);
},
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.