3

您好，感谢您查看此内容。对 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>
4

1 回答 1

2

只是一个想法，您是否尝试过将 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 上测试。

仅供参考，我在 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.

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

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

对不起，如果这不是那么有帮助。

最后编辑：实际问题。

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

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

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

要对此进行测试，请打开您的桌面浏览器。

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

当你这样做时，一切都会很好。现在试试。（注意没有万维网）。这不起作用，因为您现在正在执行跨域（因为您已经硬编码了 www 部分。url 中的部分。

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>
于 2013-11-12T23:48:31.837 回答