ページの読み込み時に、2つのAJAXリクエストを作成しています。1つはYoutubeチャンネルから最新の動画をプルするためのもので、もう1つはブログから最新の投稿をプルするためのものです。どちらのスクリプトも正しく機能します。
なんらかの理由で、どのブラウザ(Chrome、Firefox、Safari、Opera)でもテストできませんでした。リクエストが大きすぎませんか?Chromeの使用中にCORSサポートで問題が発生しているため(少なくともそれが起こっていると思います)、ブログリクエストはそこで機能せず、ビデオリクエストを完全に相殺します(機能しません)。
ChromeのJavascriptDevConsoleで発生するエラーは次のとおりです。
XMLHttpRequestはhttp://devingraham.blogspot.com/rss.xmlをロードできません。Origin nullは、Access-Control-Allow-Originでは許可されていません。
変更したら...
var tmp = $(this).find("content:first").text();
...代わりに「title:first」を見つけるだけで、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>