Cordova / PhoneGap呈现本地PHP？ [英] Cordova/PhoneGap rendering local PHP?
问题描述
我使用PhoneGap制作网络。我需要使用PHP页面，但我想要一个真正的流畅的网站，所以我选择了替换 div 加载一些PHP使用JavaScript。
I'm making a web using PhoneGap. I need to use a PHP page, but I want a real fluid website, so I opted for replacing a div with some PHP using JavaScript when loaded.
当我启动页面mypage.html时，我使用此功能检查用户连接：
When I launch the page "mypage.html" I check the user connection with this function:
<script>
function checkConnection(){
var online, speed;
/*
condizione di controllo per determinare se l'app viene correntemente testata
in un simulatore o dispositivo mobile (quindi utilizzando PhoneGap) o in un normale browser
che supporta l'HTML5
*/
if(typeof cordova != "undefined"){
/*
si tratta di un dispositivo vero e proprio o di un simulatore, quindi
utilizziamo il plugin "Connection" messo a disposizione da Phonegap
*/
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown';
states[Connection.ETHERNET] = 'Ethernet';
states[Connection.WIFI] = 'WiFi';
states[Connection.CELL_2G] = 'Cell_2G';
states[Connection.CELL_3G] = 'Cell_3G';
states[Connection.CELL_4G] = 'Cell_4G';
states[Connection.CELL] = 'Cell_generic';
states[Connection.NONE] = 'None';
//determino il tipo di connessione in base all'oggetto "states" appena definito grazie al plugin Phonegap
var connType = states[networkState];
if(connType=='None')
online = false;
else{
online = true;
if(connType=="Cell_2g" || connType=="Cell_generic")
speed="slow";
else
speed="fast";
}
}else{
/*
si tratta di un normale browser desktop o mobile, quindi
utilizziamo la funzionalità HTML5
*/
online = navigator.onLine;
if(online){
var conn = navigator.connection || {'bandwidth':'0'};
//utilizziamo il metodo "bandwidth" per determinare la velocità di connessione, il quale restituisce un valore numerico che indica la larghezza di banda della connessione corrente
if(conn.bandwidth>2)
speed="fast";
else
speed="slow";
}
}
return online?speed:false;
}
var deviceConnection = checkConnection();
if(deviceConnection){
if(deviceConnection == "slow"){
//gestione connnessione lenta
}else{
//gestione connnessione veloce
}
}else{
/*
gestione transizioni ed effetti per mostrare all'utente
un gradevole avviso di mancanza di connessione
*/
location.href="errorconnection.html";
}
</script>
这是AJAX代码：
<div id="container">
<script>
$( "#container" ).load("http://www.mywebsite.org/FOLDER/page.php #container");
</script>
</div>
当我在本地浏览器中启动mypage.html时，它可以正常工作，除了它显示为一个php代码。当我在PhoneGap上启动mypage.html时，它只显示php代码的一部分，而不是其他内容。
When I launch "mypage.html" on my browser locally it works ok, except for that it shows for a bit of php code. When I launch "mypage.html" on PhoneGap it shows me only a part of the php code and nothing else.
...
</head>
<body style="background-color:#e20a7e">
<div id="navigation">
<table width="100%">
<tr valign="bottom">
<td valign="middle" width="25%" align="center">
</td>
<td valign="bottom" width="50%" align="center">
<img src="IMG/LOGO-WHITE.png" class="logonbar" alt="DONUT"/>
</td>
<td onClick="window.location='loginpage.php'" width="25%" align="center" valign="middle">
<img src="IMG/icon/usr.png" class="icons3"/>
</td>
</tr>
</table>
</div>
<div id="container">
<?php
$DBhost = "localhost";
$DBuser = "xx";
$DBpass = "";
$DBName = "xx";
$table = "Database";
mysql_connect($DBhost,$DBuser,$DBpass) or die("mysql_error()");
@mysql_select_db("$DBName") or die("mysql_error()");
$sqlquery = "SELECT * FROM `Database` ORDER BY data DESC";
$result = mysql_query($sqlquery);
$number = mysql_num_rows($result);
$i = 0;
while ($i < $number) {
$festa[$i] = mysql_result($result,$i,"festa");
$luogo[$i] = mysql_result($result,$i,"luogo");
$idfesta[$i] = mysql_result($result,$i,"ID");
$data[$i] = mysql_result($result,$i,"data");
$nomeimg[$i] = mysql_result($result,$i,"nomeimg");
$data[$i] = data_eng_to_it_($data[$i]);
echo"
<!--INIZIO DIV EVENTO-->
<a href=\"pagevento.html?ID=$idfesta[$i]\">
<div style=\"width:90%; display:block; margin:0 auto;
padding-top:10px; margin-top:10px; padding-left:10px;
background-color:#FFF; padding-bottom:10px;
border-left:solid 5px #e20a7e;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);\">
<table width=\"100%\" style='table-layout:fixed'>
<tr valign=\"middle\">
<td valign=\"middle\" align=\"center\" class=\"evntfoto\"
style=\"background-image:url(foto/$nomeimg[$i]);
background-position:center;
background-size: cover;\">
</td>
<td valign=\"top\" align=\"left\" id=\"evnttxt\">
<font color=\"#0066FF\" size=\"+2\"> <b> ".$festa[$i]." </b></font> <br>
".$data[$i]." <br>
<font color=\"#585858\"> ".$luogo[$i]." </font> <br>
</td>
</tr>
</table>
</div>
</a>
<!--FINE DIV EVENTO-->
";
$i++;
}
?>
</div>
</div>
</body>
</html>
它显示我：
".$festa[$i]."
".$data[$i]."
".$luogo[$i]."
"; $i++; ?>
，但只能从PhoneGap。在其他浏览器中，Mac上的Safari，Mac上的Google Chrome和iPhone上的Safari都可以正常工作，并向我显示该代码只有一秒钟。可能的问题是什么？
but only from PhoneGap. In other browsers, Safari on Mac, Google Chrome on Mac and Safari on iPhone it works correctly, and shows me that code for only a second. What could be the problem?
推荐答案
摘要：您要加载本地和服务器版本的PHP页面，并且您在PhoneGap上的服务器负载出现CORS问题。
Summary: You are loading both a local and a server version of a PHP page at the same time, and you are having a CORS issue with the server load on PhoneGap.
I能够在此重现您的意外输出（ http://jsfiddle.net/Drakes/gq0my18r/ ） 。我把你的HTML / PHP代码，并将其渲染为HTML。这是输出：
I was able to reproduce your unexpected output here (http://jsfiddle.net/Drakes/gq0my18r/). I took your HTML/PHP code and rendered it as HTML only. This was the output:
".$festa[$i]."
".$data[$i]."
".$luogo[$i]."
"; $i++; } ?>
您的PHP文件在手机上，然后获取服务器版本，或者您的服务器正在以一个未处理的版本的PHP页面做出响应。
You might be serving a local copy of your PHP file on your phone, and then fetching a server version, or your server is responding with an unprocessed version of your PHP page somehow.
现在， ：
...在其他浏览器中，Safari上的safari，mac上的google chrome和safari在iphone上工作正常，代码只有一秒
... in other browsers, safari on mac, google chrome on mac and safari on iphone it works correctly, and shows me that code for only a second
这让我相信你是渲染本地HTML版本，然后以某种方式请求服务器版本。看看您在评论中提供的链接，并注意到在HTML中引人注目的一些解释一切的链接。
This leads me to believe that you are rendering the local HTML version, then somehow requesting the server version. I looked at the links you supplied me in the comments and noticed something striking in your HTML that explains everything.
您有
<div id="container">
<script>
$( "#container" ).load("http://www.bparty.org/APP/eventi.php #container");
</script>
</div>
和
<div id="container">
<script>
$( "#container" ).load( "eventi.php #container" );
</script>
</div>
。这里有很多麻烦。现在你有多个 container divs具有相同的id，并且有一个竞争条件来加载你的本地PHP版本（它不能在本地渲染），然后它是替换为可以呈现PHP的服务器版本。这解释了一些浏览器中描述的一秒滞后。
on the same page. There is a myriad of trouble happening here. Now you have multiple container divs with the same id, and there is a race condition to load your local PHP version (which can't render locally), and then it is being replaced with the server version which can render PHP. This explains that one-second lag you described in some browsers.
但是，PhoneGap和PHP的巨大无法使用AJAX将外部网页加载到您的手机应用程序中，因为某些功能称为CORS（跨源资源共享）。它只是禁止。我们现在正进入hacky-land，但您可以执行一些魔法，并使其工作。我不建议这样做，但您可以通过将此添加到 eventi.php 的顶部：
However, your huge problem with PhoneGap and PHP is that you cannot simply load external pages into your phone app using AJAX because of something called CORS (Cross-origin resource sharing). It's just disallowed. We're getting into hacky-land now, but you can do some magic and make it work. I'm not recommending this outright, but you can make your setup work by adding this to the top of eventi.php:
<?php
header("Access-Control-Allow-Origin: *");
此外，请停止使用 #container 在您的抓取网址http://www.bparty.org/APP/eventi.php #container。谁知道PhoneGap如何处理。
Also, please, please stop using #container in your fetch URL "http://www.bparty.org/APP/eventi.php #container". Who knows how PhoneGap handles that.
这篇关于Cordova / PhoneGap呈现本地PHP？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
