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

时间:2011-09-24 12:41:11

标签: jquery iphone ipad cordova

jquery .load()函数在iPad上的phonegap下无效。它非常适用于移动野生动物园。但它不适用于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手机屏幕上看到这个。在移动游猎中它只是工作正常。

提前致谢。


它仍然无效。这是代码片段:

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手机屏幕上看到这个。在移动游猎中它只是工作正常。

提前致谢。

2 个答案:

答案 0 :(得分:1)

尝试使用完整的网址。

AFAIK PhoneGap实际上是本地文件。如果要访问外部资产或Ajax,请在URL中包含协议,域和端口(如有必要)。

答案 1 :(得分:0)

我试过这个,它在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>

我不怪,我也不喜欢它。