1

我有一个 PhoneGap 项目，它在 Android 平台上运行得非常好，但它不能在 WP8 上运行。

加载 index.html（创建项目时创建的默认页面）后，我将页面重定向到名为 _layout.html 的新页面。

这是 index.js（它是 PhoneGap 内置代码，不是我的），其中包含用于重定向到我的页面的代码。

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // `load`, `deviceready`, `offline`, and `online`.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of `this` is the event. In order to call the `receivedEvent`
    // function, we must explicity call `app.receivedEvent(...);`
    onDeviceReady: function() {
        app.receivedEvent('deviceready');


        // THIS IS THE ONLY CODE I WROTE IN THIS BUILT-IN JAVASCRIPT CODE
        window.setInterval(function () {
            window.location.href = '_layout.html';
        }, 3000);
       //---------------MY CODE ENDS--------------------------------------

    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

这是 _layout.html 的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>MyApp</title>

</head>

<body onload="loadPage('_resultlist.html');">
    <div class="panel">
        <div class="row" id="Title" style="text-align: center; vertical-align: central; position: relative; left: -6%; top: 10%; margin-bottom: -30px; margin-top: -20px;">
            <img src="img/logo.png" style="width: 150px; height: 100px; text-align: center; vertical-align: central;" />
        </div>
        <hr />
        <div id="franva" style="height: 300px; display:inline-block; width: 300px;">
        </div>
        <hr />
        <div id="search" style="text-align: center;">
            <input type="button" class="searchbutton" title="Search" value="Search" />
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        function loadPage(url, onleave, onenter) {
            console.log("loadPage(" + url + ")");

            // If onleave function specified
            if (onleave) {
                onleave();
            }

            var xmlhttp = new XMLHttpRequest();

            // Callback function when XMLHttpRequest is ready
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4) {
                    if (xmlhttp.status === 200) {
                        console.log("Received content" + xmlhttp.responseText);
                        $("#franva").html(xmlhttp.responseText);
                        // If onenter function specified
                        if (onenter) {
                            onenter();
                        }
                    }
                    else {
                        $("#franva").html("Error loading page " + url);
                    }
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }

        jQuery.isUnsafe = true;

        function loadPageAjax(pageurl)
        {
            $.ajax({
                url: pageurl,
                context: document.body,
                dataType: "html"
            }).done(function (data) {
                alert("Ajax data = " + data);
                $("#franva").html(data);
            });
        }

        </script>
</body>

</html>

如您所见，该页面有一个名为“franva”的 div，它会将另一个页面 _resultlist.html 加载到该 div 中。

这是 _resultlist.html 的代码

<div id="result-list" style="width: 100%;">
    <div class="result-row">
        <div class="left">
            <img src="img/tv1.jpg" />
        </div>
        <div class="right">
            <p><strong>Samsung XT7290</strong></p>
            <p>27 inch,  AU$ 1777</p>
        </div>
    </div>

    <div class="result-row">
        <div class="left">
            <img src="img/tv2.jpg" />
        </div>
        <div class="right">
            <p><strong>Samsung XT7290</strong></p>
            <p>27 inch,  AU$ 1777</p>
        </div>
    </div>

    <div class="result-row">
        <div class="left">
            <img src="img/tv3.jpg" />
        </div>
        <div class="right">
            <p><strong>Samsung XT7290</strong></p>
            <p>27 inch,  AU$ 1777</p>
        </div>
    </div>
</div>

我只创建了这两个页面，仅此而已。（哦，如果重要的话，还包括 jquery。）

我在 PhoneGap Build 网站上运行了一个云构建来生成 Android 应用程序，它可以在我的 Android 手机上运行。无法安装在线生成的 Windows Phone 应用程序（弹出错误消息：无法安装此公司应用程序....）

所以我在我的 Visual Studio 2012 中构建了它。但是 div franva 的内容无法加载。

我浏览了 PhoneGap 文档，它说 CORS 在 PhoneGap 中不是问题，因为它有一个运行代码的 WebBrowser 底层。这是一个真正的 Android，但为什么不在 Windows Phone 8 上呢？

整个想法是有一个布局页面，这样我就不需要一次又一次地编写重复的布局部分代码。_resultlist.html 页面用作 div 的内容，它可以替换为任何其他资源，例如 Ajax 调用获取的数据。

另外，我研究过WP 8使用的是什么IE版本，答案是IE 10。关于IE10，有人说它支持CORS，有人说不……我很困惑……

我已经被这个问题困扰了好几天了。

如果有人能为我指出正确的方法，我真的很感激。

提前致谢。

4

1 回答 1

0

我得到了我的问题的解决方案。

只需在您的 Web.config 中添加以下代码

  <system.webServer>
   <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*"/>
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        </customHeaders>
    </httpProtocol>
  </system.webServer>

但这仅适用于您可以访问要检索信息的网站。如果您没有，请编写您自己的 C# 代码来执行此操作，并将其公开为 WebAPI 供您的移动应用程序使用。

我希望它对有同样问题的人有所帮助。

于 2014-01-08T12:53:00.060 回答