3

我有一个 ASP.Net MVC3 应用程序（不管它是 ASP.NET MVC、PHP 还是 RAILS，因为它最终提供的是纯 HTML），它使用 jquery mobile 并且在所有移动浏览器中运行良好。对我来说，下一步是使用 Phonegap 创建一个原生 ios 应用程序。

我的猜测是我所要做的就是在我放入 Phonegap 的 html 页面中，我将连接到页面加载事件并从远程服务器动态加载我的 MVC 视图的内容。

但是，如果其他人做过类似的事情，我正在寻找一些例子。

-提前谢谢尼克

更新：我能够通过编写以下 index.html 页面来完成此操作。希望它可以帮助别人。

仍然存在问题：但是这样做了...您可能会注意到我正在通过http://IP:8081 URL 请求我的 ASP.NET MVC 页面。这工作正常，它也加载了我的页面......但它不是 jquery 移动格式。所以，如果有人可以在这里帮助我，那就太好了。

解释：因为，ajax.responseText包含从<!DOCTYPE html>标签开始的整个 HTML...我认为很明显，我最终在<div data-role="page" id="home"> 标签内插入了整个 HTML 页面，这显然是错误的，但我还没有解决方案： (

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Ajax Sample</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript"  src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript">
        function onDeviceReady() {
            var ajax = new XMLHttpRequest();
            ajax.open("GET", "http://192.168.2.30:8081/", true);
            ajax.send();

            ajax.onreadystatechange = function () {
                alert(ajax.status);
                if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 0)) {
                    document.getElementById('home').innerHTML = ajax.responseText;
                }
            }
        }

        $(document).bind("mobileinit", function () {
            alert('mobileinit');
            // Make your jQuery Mobile framework configuration changes here!
            $.support.cors = true;
            $.mobile.allowCrossDomainPages = true;
        });

        document.addEventListener("deviceready", onDeviceReady, false);
    </script>
</head>
<body>
     <div data-role="page" id="home"> 
     </div>
     <div data-role="page" id="search"> 
     </div>
     <div data-role="page" id="recent"> 
     </div>
</body>
</html>
4

2 回答 2

3

为什么不使用 jQuery 助手从远程服务器加载页面。

$(document).bind("mobileinit", function () {
     alert('mobileinit');
     // Make your jQuery Mobile framework configuration changes here!
     $.support.cors = true;
     $.mobile.allowCrossDomainPages = true;
     $("#home").load('http://192.168.2.30:8081/ #targetContent');
});

load方法可以发出请求并将选择器的内容替换为 ajax 请求的结果。它还允许您在 URL 之后提供一个选择器，该选择器将针对您要加载到原始匹配选择器中的远程服务器的特定内容。

于 2012-05-23T23:37:09.263 回答
0

据我了解，从广义上讲，PhoneGap 有两种选择（我自己没有尝试过。现在我正在学习它们）：

  1. 您在 iOS 开发环境中安装 PhoneGap，它允许您直接从 IDE 生成本机 iOS 应用程序
  2. 在 PhoneGap 网站上，您上传您的 Web 应用程序，它们会生成您的 iOS（或 Android）应用程序二进制文件。
于 2012-05-07T01:39:09.920 回答