PhoneGap应用程序不工作在谷歌Ripple [英] PhoneGap application not working on Google Ripple
问题描述
我正在开发一个phoneGap应用程序。当我在浏览器中测试我的应用程序没有问题。 Everythings工作得很好。但是当我尝试它在波纹，我的javascript不工作。
详细：用户可以登录系统，如果它成功重定向到另一个页面（使用jquery移动），它可以很好地在chrome，internet explorer和firefox。但不工作在波纹。
我的代码如下所示：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta name =apple-mobile-web-app-capablecontent =yes>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black>
< title>< / title>
< link rel =stylesheethref =css / jquery.mobile-1.3.2.css>
< script src =js / jquery-1.10.2.js>< / script>
< script src =js / jquery.mobile-1.3.2.js>< / script>
< script src =js / jquery.base64.js>< / script>
< script src =js / cordova.js>< / script>
< script type =text / javascript>
$（function（）{
var credentials ='admin：adminabc';
var authType =Basic+ credentials;
$（'＃loginForm'）。submit function（）{
$ .ajax（{
type：GET，
url：'http：// localhost：30673 / api / user / Get'，
data ：'json'，
beforeSend：function（xhr）{
xhr.setRequestHeader（Authorization，authType）;
}，
success：function（data，textStatus）{
$ .mobile.changePage（＃menu，{
transition：slideup
}）;
}
}）;
} ;
$（＃aboutUs）。click（function（）{
$ .ajax（{
type：GET，
url：'http ：// localhost：30673 / api / AboutMeWA /'，
data：'json'，
beforeSend：function（xhr）{
xhr.setRequestHeader（Authorization，authType）
}，
success：function（data，textStatus）{
$（'＃aboutMeTitle'）。val（data）;
}
}）;
}）;
}）;
function onBodyLoad（）{
document.addEventListener（deviceready，onDeviceReady，false）;
function onDeviceReady（）{
document.addEventListener（pause，onPause，false）;
document.addEventListener（resume，onResume，false）;
}
function onPause（）{
alert（paused）;
}
function onResume（）{
alert（resume）;
}
}
< / script>
< / head>
< body onload =onBodyLoad（）>
< div data-role =pageid =mainPage>
< div data-role =headerdata-theme =a>
< h4> Ziro< / h4>
< / div>
< div data-role =content>
< form id =loginForm>
< div data-role =fieldcontain>
< label for =textinput1> KullanıcıAdı：< / label>
< input name =id =userNameplaceholder =usernamevalue =type =text>
< / div>
< div data-role =fieldcontain>
< label for =textinput2>密码< / label>
< input name =id =passwordplaceholder =passwordvalue =type =password>
< / div>
< input type =submitdata-theme =adata- icon =arrow-rdata-iconpos =left
value =Login>
< / form>
< a href =＃menuclass =ui-linkdata- transition =flip>Menü< / a>
< / div>
< div data-role =footerdata-theme =adata-position =fixed>
< h3> FFYazılım< / h3>
< / div>
< / div>
< div data-role =pageid =menudata-add-back-btn =truedata-back-btn-text =Geri>
< div data-role =headerdata-theme =a>
< h4> Ziro Mobilya< / h4>
< / div>
< div data-role =content>
< ul data-role =listviewdata-divider-theme =adata-inset =true>
< li data-role =list-dividerrole =heading>
面板
< / li>
< li data-theme =c>
< a href =＃aboutdata-transition =flipid =aboutUs> Hakkımızda< / a>
< / li>
< li data-theme =c>
< a href =＃page1data-transition =slide>参考Resimleri< / a>
< / li>
< li data-theme =c>
< a href =＃page1data-transition =slide> Servis Resimleri< / a>
< / li>
< li data-theme =c>
< a href =＃page1data-transition =slide>口号< / a>
< / li>
< li data-theme =c>
< a href =＃page1data-transition =slide> İstatistikler< / a>
< / li>
< li data-theme =c>
< a href =＃page1data-transition =slide>按钮< / a>
< / li>
< / ul>
< / div>
< div data-role =footerdata-theme =adata-position =fixed>
< h3> FFYazılım< / h3>
< / div>
< / div>
< div data-role =pageid =aboutdata-add-back-btn =truedata-back-btn-text =Geri>
< div data-theme =adata-role =header>
< h3> Hakkımızda< / h3>
< / div>
< div data-role =content>
< div style =>
< img style =width：288px; height：100pxsrc =http://aknera.com/temp/default/images/background3.jpg>
< / div>
< a data-role =buttondata-theme =ahref =＃page1data-icon =arrow-l
data-iconpos =left> Galeriden ResimSeç< / a>
< div data-role =fieldcontain>
< label for =textinput2>标签：< / label>
< input name =id =aboutMeTitleplaceholder =value =type =textdata-mini =true>
< / div>
< div data-role =fieldcontain>
< label for =textarea2> Açıklama< / label>
< textarea name =id =textarea2placeholder =data-mini =true>< / textarea>
< / div>
< a data-role =buttondata-theme =ahref =＃page1data-icon =alertdata-iconpos =left Kaydet< / a>
< / div>
< div data-role =footerdata-theme =adata-position =fixed>
< h3> FFYazılım< / h3>
< / div>
< / div>
< / body>
< / html>
我的应用程序结构如下所示：
错误代码是： xhr_proxy？tinyhippos_apikey = ABC& tinyhippos_rurl = http％3A // localhost％3A30673 / ap i / user / Get％3Fjson rippleapi.herokuapp.com状态码：500内部服务器错误我从我的本地主机获取数据post adress：localhost ：30673 / api / user / Get';它在浏览器中工作良好。并从localhost：30673 / api / user / Get获取数据。但是在涟漪中，它尝试从其中获取数据：xhr_proxy？tinyhippos_apikey = ABC& tinyhippos_rurl = http％3A // localhost％3A30673 / api / u ser / Get％3Fjson rippleapi.herokuapp.com
需要建议的人。
您可能遇到的问题是您使用Ripple跨域代理默认在设置中打开。
跨域代理有3个设置：remote，local和disabled。
在我的情况下，我实际上禁用它，但在某些情况下，你将能够使用本地。
可能的情况：
1）您的本地应用程序在另一个服务器上的某个地方调用远程服务：
根据远程服务器上的配置使用远程或禁用。
2）您的本地应用程序位于localhost调用另一个localhost可访问的URL：
您可以使用本地或禁用，具体取决于您的跨域设置等。
3）您正在运行一个本地应用程序，它调用一个本地服务器，但在一个vm或某些东西，使其无法访问localhost上的代理：
您需要将其设置为已停用，并确保您的api服务器具有允许跨域请求的设置。最值得注意的是，您需要设置Access-Control-Allow-Origin标头。
I'm developing a phoneGap application. When I test my application in the browser there is no problem. Everythings works well. But when I am try it in ripple, my javascript does not work. In detail: The user can login the system and if it successfully redirects to another page (used jquery mobile) it works well in chrome, internet explorer, and firefox. But does not work in ripple. My code is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/cordova.js"></script>
<script type="text/javascript">
$(function() {
var credentials = 'admin:adminabc';
var authType = "Basic " + credentials;
$('#loginForm').submit(function() {
$.ajax({
type : "GET",
url : 'http://localhost:30673/api/user/Get',
data : 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader("Authorization", authType);
},
success : function(data, textStatus) {
$.mobile.changePage("#menu", {
transition : "slideup"
});
}
});
});
$("#aboutUs").click(function() {
$.ajax({
type : "GET",
url : 'http://localhost:30673/api/AboutMeWA/',
data : 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader("Authorization", authType);
},
success : function(data, textStatus) {
$('#aboutMeTitle').val(data);
}
});
});
});
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
}
function onPause() {
alert("paused");
}
function onResume() {
alert("resume");
}
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="mainPage">
<div data-role="header" data-theme="a" >
<h4> Ziro </h4>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain">
<label for="textinput1"> Kullanıcı Adı: </label>
<input name="" id="userName" placeholder="username" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textinput2"> Password</label>
<input name="" id="password" placeholder="password" value="" type="password">
</div>
<input type="submit" data-theme="a" data- icon="arrow-r" data-iconpos="left"
value="Login">
</form>
<a href="#menu" class="ui-link" data- transition="flip">Menü</a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h3> FF Yazılım </h3>
</div>
</div>
<div data-role="page" id="menu" data-add-back-btn="true" data-back-btn-text="Geri">
<div data-role="header" data-theme="a" >
<h4> Ziro Mobilya </h4>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="a" data- inset="true">
<li data-role="list-divider" role="heading">
Panel
</li>
<li data-theme="c">
<a href="#about" data-transition="flip" id="aboutUs"> Hakkımızda </a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide"> Referans Resimleri </a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide"> Servis Resimleri </a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide"> Slogan </a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide"> İstatistikler </a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide"> Button </a>
</li>
</ul>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h3> FF Yazılım </h3>
</div>
</div>
<div data-role="page" id="about" data-add-back-btn="true" data-back-btn-text="Geri">
<div data-theme="a" data-role="header">
<h3> Hakkımızda </h3>
</div>
<div data-role="content">
<div style="">
<img style="width: 288px; height: 100px" src="http://aknera.com/temp/default/images/background3.jpg">
</div>
<a data-role="button" data-theme="a" href="#page1" data-icon="arrow-l"
data-iconpos="left"> Galeriden Resim Seç </a>
<div data-role="fieldcontain">
<label for="textinput2"> Başlık: </label>
<input name="" id="aboutMeTitle" placeholder="" value="" type="text" data-mini="true">
</div>
<div data-role="fieldcontain">
<label for="textarea2"> Açıklama </label>
<textarea name="" id="textarea2" placeholder="" data-mini="true"></textarea>
</div>
<a data-role="button" data-theme="a" href="#page1" data-icon="alert" data-iconpos="left"> Kaydet </a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h3> FF Yazılım </h3>
</div>
</div>
</body>
</html>
My application structure is shown below:
Error code is:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/user/Get%3Fjson rippleapi.herokuapp.com Status Code:500 Internal Server Error I'am getting data from my localhost post adress:localhost:30673/api/user/Get'; It is working well in browser . And getting data from localhost:30673/api/user/Get. But in ripple it tries to get data from There: xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/user/Get%3Fjson rippleapi.herokuapp.com
Need advice guys.
The issue that you are likely running into is that you are using Ripple's cross-domain proxy which is turned on in settings by default.
The cross-domain-proxy has 3 settings: "remote", "local" and "disabled". In my situation I actually had to disable it, but in some cases you would be able to use "local".
Possible scenarios:
1) your local application calls a remote service somewhere on another server:
you would either use "remote" or "disabled" depending on the configuration on the remote server.
2) your local application is on "localhost" and you are making a call to another localhost accessible URL:
you would either use "local" or "disabled" depending on your cross domain settings and such.
3) you are running a local app that calls a server that is also local but in a vm or something that makes it inaccessible to a proxy on "localhost":
you need to have it set to "disabled", and make sure your api server has settings to allow cross-domain requests. Most notably you would want to set the "Access-Control-Allow-Origin" header.
这篇关于PhoneGap应用程序不工作在谷歌Ripple的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
