jquery .load() 函数在 phonegap 下不起作用答案

【问题标题】：jquery .load() function does not work under phonegapjquery .load() 函数在 phonegap 下不起作用
【发布时间】：2011-09-24 12:41:10
【问题描述】：

jquery .load() 函数在 iPad 上的 phonegap 下不起作用。它在移动 Safari 中运行良好。但它在 Phonegap 应用程序中不起作用。任何帮助将不胜感激。

更新：代码如下所示：

this.image_container.load( function(response, status, xhr) {
    var dis = this;
    var imgWidth = dis.image_container.width();
    var imgHeight = dis.image_container.height();

    dis.containerEl.css({
        //some css addition
    }).animate( { "opacity": "1" }, 400, "linear" );
});

同时调试服务器响应是

{"responseText":"","status":404,"statusText":"error"}

但我只在 iPad phonegap 中得到这个。在移动 Safari 中它运行良好。

提前致谢。

它仍然无法正常工作。这是代码sn-p：

this.image_container.load( function(response, status, xhr) {
  var dis = this;
  var imgWidth = dis.image_container.width();
  var imgHeight = dis.image_container.height();
  dis.containerEl.css({
    //some css addition
  }).animate( { "opacity": "1" }, 400, "linear" );
});

同时调试服务器响应是

{"responseText":"","status":404,"statusText":"error"}

但我只在 iPad phonegap 中得到这个。在移动 Safari 中它运行良好。

提前致谢。

【问题讨论】：

当你尝试使用它时会发生什么？有示例代码要分享吗？
我承认，我对 load() 的调用感到困惑。我从未见过将函数作为第一个也是唯一一个参数的 load() 调用。另外，this.image_container 是 jQuery 对象吗？它是如何创建的？响应、状态和 xhr 值从何而来？这是否包含在 $.ajax() 成功处理程序中？
this.image_container 是一个 jquery 对象，响应、状态和 xhr 被包装在 $.ajax 失败处理程序中。
因为你已经在使用 $.ajax 和 success() 和 failure()，所以没有理由使用 load()。 Load 只是 $.ajax() 的抽象。而是在要放入数据的 DOM 元素上使用 html() 或 text()。至于为什么它在移动 safari 中起作用，我不能告诉你。我认为不应该。如果确实如此，我会说这是一个怪癖，而不是它应该工作的方式。

标签： jquery iphone ipad cordova

【解决方案1】：

尝试使用完整的 URL。

AFAIK PhoneGap 实际上是作为本地文件提供的。如果您想访问外部资产或 Ajax，请在 URL 中包含协议、域和端口（如果需要）。

【讨论】：

【解决方案2】：

我试过了，它在 Android 模拟器和 iOS 模拟器上都运行良好。

<!DOCTYPE html> 
<html>
    <head>
    <meta charset="UTF-8">
    <title>jQuery Remote</title>
    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

    <script src="phonegap.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function(){           
            $('#test1').load('index2.html');  // Local Call - This is just a file in the same project called index2.html with the word "Test" in it
            $('#test2').load('http://www.twitter.com/help/test.json');  // Remote call
            $('#test3').load('http://www.12robots.com/index.cfm .body');  // Another remote call
        });



    </script>
    </head> 
    <body> 

        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page One</h1>
            </div>
            <div data-role="content">
                <div id="test1"></div>
                <div id="test2"></div>
                <div id="test3"></div>
            </div>
        </div>
    </body>
</html>

我确实注意到，当我尝试加载整个 HTML 文档（包括 head、body、html 标签）时，我只得到一个白屏。但是，当我只尝试加载文档的一部分时（比如正文中的一个 div，如下面的第三个示例），它可以正常工作。我怀疑浏览器只是不喜欢这种结构：

<html>
    <head>
    </head>

    <body>
        <div>
            <html>
                <head>
                </head>

                <body>
                </body>
            </html>
        </div>
    </body>
</html>

我不怪它，我也不喜欢它。

【讨论】：