您好，感谢您查看此内容。对 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>
最佳答案
只是想一想，您是否尝试过将 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 问题。
抱歉，如果这没有帮助。
最终编辑:实际问题。
好的，据我所知问题是完全编码的 url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 在你的脚本中。由于您在同一主机上的同一网络服务器上，我建议使用相对 url 作为
/BayAreaTech/wp-rss2.php?cat=1
这是因为如果您在没有 www 的情况下浏览。在您的浏览器(或设备)中，脚本认为它正在调用另一个服务，因为 URL 匹配。但是，由于您在同一台服务器上托管该服务，因此您可以删除 http://www。部分，这应该可以正常工作。
要对此进行测试，请打开您的桌面浏览器。
http://www.e-grid.net/mobile/index.html
当您执行此操作时，一切正常。现在试试。 (注意没有 WWW)。这不起作用，因为您现在正在执行跨域(因为您已经对 www 部分进行了硬编码。url 中的部分。
http://e-grid.net/mobile/index.html
试一试，让我知道结果如何。
尝试以下脚本 block 。
<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>
关于javascript - Ajax 功能不适用于移动浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19942292/