在页面加载时,我提出了两个 AJAX 请求:一个是从 Youtube 频道提取最新视频,另一个是从博客中提取最新帖子。两个脚本都能正常工作。
无论出于何种原因,我都无法在任何浏览器(Chrome、Firefox、Safari 和 Opera)中对其进行测试。请求是否太大?我在使用 Chrome 时遇到了 CORS 支持的问题(至少我认为是这样),所以博客请求在那里不起作用并且完全抵消了视频请求(它不起作用)。
这是我在 Chrome 的 Javascript 开发控制台中遇到的错误:
XMLHttpRequest 无法加载http://devingraham.blogspot.com/rss.xml。Access-Control-Allow-Origin 不允许 Origin null。
如果我改变...
var tmp = $(this).find("content:first").text();
...只是找到“标题:第一个”,它在 Safari 中呈现良好而不会冻结。如果我将它保留在内容并加载页面,我可以看到帖子加载得很好,但是页面冻结并且不会加载视频。所以也许是太多了?我知道我要发布的帖子很长,但它会引起任何问题似乎很愚蠢。那么你有什么想法吗?
这是脚本:
<script type="text/javascript" charset="utf-8">
$(function() {
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/base/users/devinsupertramp/uploads?orderby=updated&alt=rss&client=ytapi-youtube-rss-redirect&v=2",
dataType: "xml",
success: parseVideo
});
$.ajax({
type: "GET",
url: "http://devingraham.blogspot.com/rss.xml",
dataType: "xml",
success: parseBlog
});
});
function parseVideo(xml) {
$(xml).find("item:first").each(
function() {
var tmp = $(this).find("link:first").text();
tmp = tmp.replace("http://www.youtube.com/watch?v=", "");
tmp = tmp.replace("&feature=youtube_gdata", "");
tmp2 = "http://www.youtube.com/embed/" + tmp + "?autoplay=1&controls=0&rel=0&showinfo=0&autohide=1";
var iframe = $("#ytplayer");
$(iframe).attr('src', tmp2);
}
);
}
function parseBlog(xml) {
$(xml).find("entry:first").each(
function() {
var tmp = $(this).find("content:first").text();
var post = $("#blog");
post.append(tmp);
}
);
}
</script>