如何将服务器端生成的新页面加载到 PhoneGap 或 Cordova 应用程序中?

How to load new pages generated server-side into a PhoneGap or Cordova app?

我正在尝试找出最简单、最快捷的技术来使我们公司的网站适应可以从应用程序商店下载的应用程序。 PhoneGap/Cordova 看起来要走的路。使用 InAppBrowser 插件看起来是一条显而易见的路线,但我们将需要通过 Cordova 插件访问一些 phone API,而且似乎无法在 InAppBrowser(Webview?)window 中访问来自它们的数据.

作为替代方案,我想知道为什么我不能简单地将我的 PhoneGap 页面(实际上是单页应用程序)中的 HTML 内容替换为从我们加载的新 HTML 页面内容服务器?我们在服务器端使用 Laravel 模板,因此已经有一个页面包装器,Laravel 在发送到客户端之前将页面特定的内容(在服务器上)注入其中。我可以将页面包装器 HTML 移动到前端(进入编译到我的 PhoneGap 应用程序中的 SPA)完成所有页面所需的所有 JS 和 CSS,然后只实时加载新页面内容进入 DOM(例如在页面 BODY 中),任何 JS 都可以通过 Cordova 插件访问 phone API。

这可行吗,还是我遗漏了什么? (有什么问题吗?)

谢谢。

你可以使用这样的东西

在您的服务器中创建页面 home.php,如下所示:

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

科尔多瓦 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>