Question

我正在尝试开发一个概念验证，我使用jQuery将HTML内容加载到div中。我正在使用jQuery，jQueryMobile和PhoneGap。我有一个简单的index.html和一个jQueryMobile页面。我想向内容div注入对我的服务器的调用的结果（HTML）。我正在Android模拟器上测试它。这是我的代码：

function onBodyLoad()
{    
    document.addEventListener("deviceready",onDeviceReady,false); 
}

function onDeviceReady()
{     
    var url = "http://www.myserver.com/content/qwerty";
    $("#applicationContainer").load(url);
}
<body onload = "onBodyLoad();">

<div data-role="page" id="page">
    <div data-role="header">
        <h1>My Content</h1>
    </div>
    <div id="applicationContainer" data-role="content"> 
    </div>
</div>

</body>

这不起作用。我究竟做错了什么？我可以将我的android apk文件加载到模拟器中并打开应用程序，但我无法将HTML加载到内容div中。我的概念是使用phonegap创建android和iphone移动应用程序，将html内容加载到页面中。我错过了什么？谢谢你的时间。

Answer 1

您的index.html也必须位于同一台服务器上。这是同源政策。

考虑一下：如果您可以将每个页面加载到您的网站中，您可以执行以下操作：

$("#container").load("http://facebook.com/messages"）。每个网站都可以阅读您的私信。这就是您只能访问同一域中的网站的原因。

有一些解决方法，例如Yahoo Pipes。

Answer 2

我偶然发现了这个教程，它可能解释了我无法从外部服务器加载内容的原因：

http://samcroft.co.uk/2011/updated-loading-data-in-phonegap-using-jquery-1-5/

在本教程结束时，作者称PhoneGap 1.x +将“ExternalHosts”添加到项目plist文件中（他们的示例处理iOS）。通过此更改，您必须将您从应用程序中访问的服务器列入白名单，因此请务必添加任何域。那么，如何将外部服务器列入白名单以实现Android PhoneGap？您是否认为这解释了为什么我无法在我的简单示例中加载内容？感谢

Answer 3

您是否已将域名“www.myserver.com”添加到白名单文件中？

没关系，我猜这只适用于iOS。

您可以在onDeviceReady中发出警报以确保代码被调用吗？

Answer 4

<script type="text/javascript">

$("#page").bind("pageshow",function(){
 //your jquery operation when pageshow event triggered.

 var url = "http://www.myserver.com/content/qwerty";
 $("#applicationContainer").load(url);

});

function onBodyLoad()
{    
    document.addEventListener("deviceready",onDeviceReady,false); 
}

function onDeviceReady()
{     
   //your phonegap operation.

}
</script>
<body onload = "onBodyLoad();">

<div data-role="page" id="page">
    <div data-role="header">
        <h1>My Content</h1>
    </div>
    <div id="applicationContainer" data-role="content"> 
    </div>
</div>

</body>

Answer 5

我找到了如何将外部服务器列入白名单：

What is the state of whitelisting in phonegap 1.3.0?

查找phonegap.xml（我的是res文件夹 - 〜/ res / xml / phonegap.xml）并添加：

这允许所有域名。

希望这有帮助。

在由phonegap包装的应用程序中使用jQuery将url加载到div中

5 个答案: