2013-09-24 50 views
1

我有一个在Android平台上运行得非常好的PhoneGap项目,但它不能在WP8上运行。跨域资源共享(CROS)在PhoneGap的Windows Phone 8上似乎不起作用

在加载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> 

代码正如你可以看到这个页面有一个div其称为“franva”,它加载另一个页面,_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> 

我只创建了这2页,没有什么比他们更多的代码。(哦,如果计数还包括jQuery的。)

我跑了云构建在PhoneGap Build网站上生成Android应用程序,并在我的Android手机上运行。在线生成的Windows Phone应用程序无法安装(它弹出错误消息:无法安装此公司应用程序....)

因此,我在Visual Studio 2012中构建它。但div franva的内容无法加载。

我经历了PhoneGap文档,它说CORS在PhoneGap中不是问题,因为它具有运行代码的WebBrowser底层。这是一个真正的Android,但为什么不在Windows Phone 8上?

整个想法是有一个布局页面,所以我不需要一次又一次地写出重复的布局零件代码。 _resultlist.html页面用作div的内容,它可以被任何其他资源(如通过Ajax调用获取的数据)替代。

此外,我已经做了一个关于IE8版本在WP8中使用的研究,答案是IE10。 关于IE10,有人说它支持CORS,其他人说不....我很困惑。 ...

我一直在这个问题上坚持了几天。

真的很感谢,如果有人能为我指出正确的道路。

在此先感谢。

+0

ooooooops ...我们的专家在哪里? – Franva

+0

第2天,你好~~~? – Franva

+0

你有没有得到答案? – Apqu

回答

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,以供你的移动应用程序使用。

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