跨域资源共享(CROS)似乎不适用于PhoneGap中的Windows Phone 8
Cross Domain Resources Share(CROS) seems doen't work on Windows Phone 8 in PhoneGap
我有一个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,有人说不......我很困惑...
我已经在这个问题上停留了好几天。
如果有人能为我指出正确的方法,真的很感激。
提前谢谢。
我得到了我的问题的解决方案。
只需在您的 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 供移动应用使用。
我希望这对有同样问题的人有所帮助。
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- Javascript仅适用于alert()和Debug模式
- JS适用于Firefox和Safari,但不适用于Chrome.此处'是我的网站
- Regex不适用于Firefox,但适用于Chrome
- 适用于Android的PhoneGap相机API-未捕获异常
- 在Android上使用PhoneGap的地理位置仅适用于index.html
- 适用于ios的Phonegap插件..javascript部分
- 适用于BlackBerry OS 7的Phonegap电子邮件编辑器插件