Question

您好，感谢您的光临。对jQuery / ajax等很新。这个网站有FTP访问适当的服务器，所以我（据我所知）并没有违反跨域策略。这个网站在任何桌面浏览器上都可以正常工作，但不适用于任何移动浏览器。我觉得这个问题很明显，但我不知道该怎么做。有人可以帮我解决这个问题吗？

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
            type: 'GET',
            url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
                });
            }
        });
</script>

</head> 
<body> 

<div data-role="page" id="page">



    <div data-role="header" data-theme="b">


    <h1>GRID MOBILE</h1>

</div>
    <div data-role="content">   
        <div id="feedContainer"></div>  
        <h3></h3>
        <p></p>

    </div>
    <div data-role="footer">
        <h4>Advertisements</h4>
    </div>
</div>


</body>
</html>

Answer 1

只是想一想，你是否尝试在加载事件中包装你的ajax调用。我没有在移动浏览器上测试过这个。不过试试。

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
                });
            }
        });
    });
</script>

请注意，唯一的更改是$(function() { });换行。

编辑：在OSX上测试。

只是一个简单的FYI我在OSX上的iPhone 5s上测试了你的页面，并且确实存在跨站点原点问题。

实际错误是

XMLHttpRequest cannot load http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.

现在这是使用Safari Web检查器从iPhone发出的错误。此外，当此文件未托管在Web服务器上并作为简单的HTML文件运行时，请求正常。只要您在网络服务器中托管文件，就会出现CORS问题。

要解决此问题，您需要联系网站管理员并允许跨网站来源，切换到另一种检索问题的方法。还有其他方法可以尝试解决CORS问题。

很抱歉，如果这没有帮助。

最终编辑：实际问题。

好的，我可以告诉您问题是脚本中的完全编码的网址 http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 。由于您在同一主机上的同一个网络服务器上，我建议使用相对网址

/BayAreaTech/wp-rss2.php?cat=1

原因是如果您在没有www的情况下浏览。在您的浏览器（或设备）中，当脚本完成匹配时，脚本认为它正在调用另一个服务。但是，当您在同一服务器上托管服务时，可以消除http://www。部分，这应该工作正常。

要测试此功能，请打开桌面浏览器。

http://www.e-grid.net/mobile/index.html

当你这样做时一切正常。现在试试。（注意没有WWW）。这不起作用，因为您现在正在执行跨域（因为您已经在网址中对www部分进行了硬编码。

http://e-grid.net/mobile/index.html

尝试一下，让我知道它是怎么回事。

尝试以下脚本块。

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: '/BayAreaTech/wp-rss2.php?cat=1',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
                });
            }
        });
    });
</script>

Ajax功能不适用于移动浏览器

1 个答案: