javascript - 并非所有 Ajax 内容都加载在一个域上

Question

我有域名http://whatthecatdragged.in/转发(隐藏)至http://moppy.co.uk/wtcdi/

根页面(index.html)使用 Ajax加载内容。在原始主机 (moppy.co.uk/wtcdi) 上加载页面和所有内容。但是，在域转发域 (whatthecatdragged.in) 中，某些内容无法加载。这与 .each 用于触发 Ajax 调用的方式有关吗，如AnthonyWJones所述？

我尝试对此进行调试，但特别打开了 Firebug Firefox 3.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
            }
          }
        })
      });
    });
});

更新1:我联系了域名公司，他们的建议基本上是“不要使用JavaScript”。仍然不明白为什么它可以在一个域名下工作，而不能在另一个域名下工作...这可能与他们通过框架“转发”域名这一事实有关吗？

Answer 1

浏览器将阻止发送到托管脚本的域之外的 AJAX 请求。从声音来看，这很可能是导致您问题的原因。

编辑:我发现了问题，您的脚本中有 console.debug() 调用。此方法由 Firebug 控制台定义，这就是为什么它仅在控制台处于事件状态时才起作用。尝试删除对 console.debug() 的所有调用，看看效果如何。