Javascript 并非所有Ajax内容都加载在一个域上
我已将域转发(隐藏)到 根页面(index.html)用于加载内容。在原始主机(moppy.co.uk/wtcdi)上加载页面和所有内容。但是,在域转发域(whatthecatdraud.in)上,某些内容不会加载。这与Javascript 并非所有Ajax内容都加载在一个域上,javascript,json,jquery,cross-domain,Javascript,Json,Jquery,Cross Domain,我已将域转发(隐藏)到 根页面(index.html)用于加载内容。在原始主机(moppy.co.uk/wtcdi)上加载页面和所有内容。但是,在域转发域(whatthecatdraud.in)上,某些内容不会加载。这与的方式有关吗?每个都是用来触发Ajax调用的,如所述 我尝试过调试这个,但是在Firefox3.5中特别地打开控制台,实际上似乎可以加载所有的内容 // Content building code: $(function() { // Set a few variables
的方式有关吗?每个都是用来触发Ajax调用的,如所述
我尝试过调试这个,但是在Firefox3.5中特别地打开控制台,实际上似乎可以加载所有的内容
// Content building code:
$(function() {
// Set a few variables (no need for secrecy with Flickr API key).
var apiKey = 'myapikey';
// var tags = '';
var tagsArr = new Array();
// Get the photos of flickr user WhatTheCatDraggedIn.
// This Ajax call always seems to complete.
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' +
apiKey +
'&user_id=46206266@N05&extras=date_taken,tags&format=json&jsoncallback=?',
function(data) {
// Set some variables to ensure alldata is fecthed from second API
// call (below) before building majority of content.
var totalExpected = data.photos.total;
var totalFetched = 0;
var photohtml = '';
// For each photo, do the following:
$.each(data.photos.photo, function(i, item) {
// Set size of photo thumbnail to display.
var size = 's';
var append = '';
if (i == 0) {
// Display most recent thumbnail larger, and add a line
// break for small pics beneath it.
size = 'm';
append = '<br />'
}
//Only display thmbnails of 4 most recent catches (1 large, 3 small).
if (i <= 3) {
var photoSrc =
'http://farm' + item.farm + '.static.flickr.com/' +
item.server + '/' + item.id + '_' + item.secret + '_' +
size + '.jpg'
//Each thumbnail links to that photo's Flickr page.
var flickrPage =
'http://flickr.com/photos/' + item.owner +
'/' + item.id + '/';
// Each thumbnail has a big tooltip, with tags formatted appropriately.
var formattedTags = item.tags.replace(/\s/g, "<br />");
formattedTags = formattedTags.replace(/cat/, "cat: ");
formattedTags = formattedTags.replace(/loc/, "location: ");
formattedTags = formattedTags.replace(/victim/, "victim: ");
formattedTags = formattedTags.replace(/status/, "status: ");
formattedTags = formattedTags.replace(/floor/, " floor");
formattedTags = formattedTags.replace(/toy/, " toy");
//Append the built html to one varable for adding to page shortly
photohtml +=
'<a class="flickr-page-link" href="' +
flickrPage + '"><img src = "' +
photoSrc + '" title="' + formattedTags + '"/>' +
append + '</a>';
}
var photoID = item.id;
// Get the detailed photo information (including tags) for the photo.
// This is the call that perhaps fails or at least content
// generated after this call does not load.
$.getJSON(
'http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' +
apiKey + '&photo_id=' + photoID +
'&format=json&jsoncallback=?',
function(data) {
if (data.photo.tags.tag != '') {
$.each(data.photo.tags.tag, function(j, item) {
// Place all tags in an aray for easier handling.
tagsArr.push(item.raw);
});
// Incrememt number of photos fetched.
totalFetched += 1;
// Have we got them all?
if (totalFetched == totalExpected)
fetchComplete();
}
});
// Builds a shedload more content once all JSON calls are completed.
function fetchComplete() {
// ### BUILD VICTIM list ###
// format a regex to match tags beginnign : "victim: "
var vicRe = /^v[a-z]+:\s([a-z\s]+)/
// Match the regex to the tags and count number of matches per tag.
var vicCounts = tagsArr.countVals(vicRe);
var victimsHtml = "";
// For each victim.
for (var i in vicCounts) {
var strippedTag = [i].toString().replace(/\W/g, "");
console.debug(strippedTag);
// Add a line of html with the type of victim and the number of victims of that type
victimsHtml +=
"<a href='http://flickr.com/photos/46206266@N05/tags/victim" +
strippedTag + "/'>" + [i] +
" (" + vicCounts[i] + ") </a><br />";
};
// Replace existing HTML with new version.
$('#types-dragged').html(victimsHtml);
// ### BUILD STATUS PIE CHART ###
// Build a theme for chart colours.
var wtcdicharttheme = {
colors: ['#C66800', '#D3C70B', '#DD3D0B', '#D30729',
'#DDA70B'
],
marker_color: '#000000',
font_color: '#000000',
background_colors: ['#ffffff', '#ffffff']
};
// Create a new chart object, include css id of canvas
// where chart will be drawn.
var g = new Bluff.Pie('status', '275x250');
// Set a theme and stuff.
g.set_theme(wtcdicharttheme);
// No title, as this exists via the raw page HTML.
g.title = '';
g.legend_font_size = "50px";
g.marker_font_size = "20px";
// Build a regex string to match tags beginning "status: ".
var statRe = /^s[a-z]+:\s([a-z\s]+)/
// Match regex to tags and return an object with tag
// names and number of occurences.
var statCounts = tagsArr.countVals(statRe);
// For each status.
for (var i in statCounts) {
// Add data to the chart
g.data([i], [statCounts[i]]);
};
// Draw the chart.
g.draw();
// ### BUILD LOCATION LIST ###
// Build a regex that matches tags beginning "loc: "
var locRe = /^l[a-z]+:\s([a-z\s]+)/
// Match regex to tags and return an object with
// tag names and number of occurences.
var locCounts = tagsArr.countVals(locRe);
var locatHtml = "";
// For each location.
for (var i in locCounts) {
var strippedTag = [i].toString().replace(/\W/g, "");
// Add a line of html with the location and the
//number of times victims found in that location.
locatHtml +=
"<a href='http://flickr.com/photos/46206266@N05/tags/loc" +
strippedTag + "/'>" + [i] + " (" +
locCounts[i] + ") <br />";
};
// Replace existing html with newly built information.
$('#locations').html(locatHtml);
// ### BUILD CAT LIST ###
// Build a regex that maches tags beginning "cat: ".
var catRe = /^c[a-z]+:\s([a-z_\s]+)/
//Match regex to find number of catches each cat has made
var catCounts = tagsArr.countVals(catRe);
// For each cat.
for (var i in catCounts) {
var strippedTag = [i].toString().replace(/\W/g, "");
// Insert number of catches to div titled "(catname)-catch"
$('#' + [i] + '-catch').html(
"<a href='http://flickr.com/photos/46206266@N05/tags/" +
strippedTag + "/'>" + catCounts[i] + "</a>");
};
}
});
// Insert total dragged onto page.
$('#total-dragged').html(data.photos.total);
// Insert photos onto page.
$('#latest-catches').html(photohtml);
// Add tooltips to the images from Flickr.
$('img').each(function() {
$(this).qtip({
style: {
name: 'wtcdin'
},
position: {
target: 'mouse',
adjust: {
x: 8,
y: 10
}
}
})
});
});
});
//内容构建代码:
$(函数(){
//设置一些变量(不需要使用Flickr API密钥进行保密)。
var apiKey='myapikey';
//var标签=“”;
var tagsArr=新数组();
//获取flickr用户WhatTheCatDraggedIn的照片。
//这个Ajax调用似乎总是完成的。
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' +
阿皮基+
“&用户id”=46206266@N05&extras=date_take,tags&format=json&jsoncallback=?',
功能(数据){
//设置一些变量,以确保从第二个API发送所有数据
//在构建大部分内容之前,请致电(下方)。
var totalExpected=data.photos.total;
var totalFetched=0;
var photohtml='';
//对于每张照片,请执行以下操作:
$。每个(data.photos.photo,函数(i,项){
//设置要显示的照片缩略图的大小。
变量大小='s';
var-append='';
如果(i==0){
//放大显示最近的缩略图,并添加一行
//打破它下面的小图片。
大小='m';
追加=“
”
}
//仅显示最近4次捕获的Thmbnail(1次大捕获,3次小捕获)。
如果(i浏览器将阻止在脚本所在域之外发送的AJAX请求。这很可能是问题的根源
编辑:我发现了问题,您的脚本中有console.debug()调用。此方法由Firebug控制台定义,这就是为什么它仅在控制台处于活动状态时工作。请尝试删除对console.debug()的所有调用看看它是怎么回事。我跟踪了链接并检查了来源,当他说转发时,他的意思是他在使用帧。由于帧的内容(包括
元素)来自适当的域,因此没有跨域问题。嗯,我没有考虑我在使用帧……这似乎就是我的方式托管公司已经实现了转发…我还添加了上面的代码,并对每个代码进行了注释。getJSON调用显示哪些确实发生了,哪些可能没有发生…我跟踪了链接和“拖入的项目类型”,“发现的项目位置”和“项目状态”在这两种情况下都没有加载…是的,似乎我以前有过,在同一个会话中,在我在moppy.co.uk上查看版本的选项卡上启用了firebug。我的错误。