Не весь контент Ajax загружается на один домен - PullRequest
0 голосов
/ 20 января 2010

У меня есть домен 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 ". До сих пор не могу понять, почему он будет работать под одним доменным именем, а не под другим ... Может ли это быть связано с тем, что они «пересылают» домен с помощью фрейма?

1 Ответ

2 голосов
/ 20 января 2010

Браузер будет блокировать запросы AJAX, которые отправляются за пределы домена, на котором размещен скрипт.Это, скорее всего, причина вашей проблемы из-за звука вещей.

РЕДАКТИРОВАТЬ: Я обнаружил проблему, у вас есть вызовы console.debug () в вашем скрипте.Этот метод определяется консолью Firebug, поэтому он работает только при активной консоли.Попробуйте удалить все вызовы console.debug () и посмотрите, как это происходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...