Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > .load(), jquery 1.9.1, IE8 и яндекс-метрика

Автор: Чoо 5.7.2013, 02:37

Здравствуйте. Задача состоит в следующем: необходимо при клике по ссылкам, находящимся в блоке div#menu_X загрузить страницу в блок div#ajax_content_X div.for_ajax. В загружаемой странице нужная секция находится в блоке div.for_ajax.

Имею вышеперечисленное и в секции head:

Код


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="design/scripts/load_ajax.jQuery.js"></script>
<script>
    $(document).ready(function(){
        $('#ajax_content_a').ajax_load_pages({
            'containerdiv': '#ajax_content_a',
            'contentdiv': '.for_ajax',
            'idlinks': '#menu_a a'
        });
        $('#ajax_content_b').ajax_load_pages({
            'containerdiv': '#ajax_content_b',
            'contentdiv': '.for_ajax',
            'idlinks': '#menu_b a'
        });
    });
</script>

содержимое load_ajax.jQuery.js:

Код


(function( $ ) { 
    var defaults = {
        containerdiv: '#ajax-content',
        contentdiv : '.for_ajax',
        idlinks: '#menu-ajax a'    
    };
    
    $.fn.ajax_load_pages = function(params){
     var options = $.extend({}, defaults, params);
        $(options.idlinks).click(function(e){
         var link = this.href;
         $(options.containerdiv).animate({opacity:0},function(){
             $(options.containerdiv).load(link+" "+options.contentdiv,function(){
                 $(options.containerdiv).animate({opacity:1});
             });
         });
         e.preventDefault();
        });        
        return this;
    };    
})(jQuery);

код счетчика от яндекс-метрики:

Код


<!-- Yandex.Metrika counter -->
<div style="display:none;"><script type="text/javascript">
(function(w, c) {
    (w[c] = w[c] || []).push(function() {
        try {
            w.yaCounterXXXXXXX = new Ya.Metrika({id:XXXXXXX, enableAll: true});
        }
        catch(e) { }
    });
})(window, "yandex_metrika_callbacks");
</script></div>
<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script>
<noscript><div><img src="//mc.yandex.ru/watch/XXXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

запрашиваемую страницу вывожу в эту конструкцию(при клике по ссылкам в ней же):

Код


    <div id="menu_a">
        <a href=%link%>%text%</a>
        <a href=%link%>%text%</a>
        <a href=%link%>%text%</a>
        <a href=%link%>%text%</a>
        <a href=%link%>%text%</a>
        <a href=%link%>%text%</a>
        <div id="ajax_content_a">
            <div class="for_ajax">
                <!-- СЮДА ВЫВОДИТСЯ ЗАПРАШИВАЕМАЯ СТРАНИЦА -->
            </div>
        </div>
    </div>

в запрашиваемой странице нужный участок размещен в блоке:

Код


<!-- ... -->
            <div class="for_ajax">
                <!-- от сюда берем нужную часть-->
            </div>
<!-- ... -->

Содержимое, вобщем-то, получаю.. но вместе с тем в IE8 получаю сообщение:

Код


 Строка: 39
Ошибка: 'navigator.userAgent' -  есть null или не является объектом

(watch.js).
Обе страницы находятся в пределах одного домена. На двух же страницах установлен одинаковый счетчик. Если убрать счетчик с запрашиваемой .load() страницы - ошибка не наблюдается. Но это не решение - счетчик там нужен..
Подскажите пожалуйста, как решить эту проблему?

Автор: ksnk 5.7.2013, 07:22

Загружаемые страницы - в принципе - самостоятельные страницы сайта? Счетчик метрики там нужен именно по этому? Может не выводить его при генерации страниц, запрашиваемых по ajax? Так как получается, что на одной и той же странице(url остается таким же) вызывается метрика несколько раз. Yandex может неправильно понять.

Как вариант, если до генерации страниц добраться сложно, можно переписать

Код


$.fn.ajax_load_pages = function(params){
     var options = $.extend({}, defaults, params);
        $(options.idlinks).click(function(e){
         var link = this.href;
         $(options.containerdiv).animate({opacity:0},function(){

             // $.ajax вместо load
             $.ajax({
                url:link+" "+options.contentdiv,
                success: function(data){
                    data=data.replace(/<!-- Yandex\.Metrika[\n\r.]*/Yandex\.Metrika counter -->/,'')
                    $(options.containerdiv).html(data);
                    $(options.containerdiv).animate({opacity:1});
                }
             })
         });
         e.preventDefault();
        });        
        return this;
    };

Автор: Чoо 5.7.2013, 12:45

ksnk, спасибо за ответ.
Загружаемые страницы - самостоятельные (на них можно попасть и на прямую), поэтому счетчик там нужен.
К сожалению, с .ajax() та же ошибка (правда немного изменил код):

Код


    $.fn.ajax_load_pages = function(params){
         var options = $.extend({}, defaults, params);
            $(options.idlinks).click(function(e){
             var link = this.href;
             $(options.containerdiv).animate({opacity:0},function(){
                 $.ajax({
                        url:link, //в функции .load() можно было в адресе через пробел указать селектор, с которого забирается содержимое.
                        success: function(data){
                                data=data.replace(/<!-- Yandex\.Metrika[\n\r.]*\/Yandex\.Metrika counter -->/,''); //забекспейсил слеш
                                    $(options.containerdiv+">"+options.contentdiv).html($(options.contentdiv, data).html());     
                                   //^^забираю из .contentdiv запрашиваемой страницы
                            $(options.containerdiv).animate({opacity:1});
                        }
                     })
             });
             e.preventDefault();
            });        
            return this;
        };

получаю в ИЕ ту же ошибку:
http://s018.radikal.ru/i526/1307/af/b08d572a9631.png
в страницу до переделки функции и после вставляется часть страницы без счетчика. но он все-таки как-то влияет на процесс
ошибка проявляет себя при клике по ссылке. после нее уже отрабатывает функция.

***
ставлю точки останова в watch.js на первой строке и в load_ajax.jQuery.js на var link = this.href; - в ff останавливается на метрике, в IE останавливается в load_ajax.jQuery.js

Автор: Чoо 5.7.2013, 15:32

ну вобщем причина, по которой поведение не поменялось - под регулярное выражение попадала только строка

Код


<!-- Yandex Metrika counter -->

соответственно код счетчика оставался. как сделать, что бы затереть весь блок - я не сообразил, поэтому просто вставил открытый комментарий

Код


data=data.replace(/<!--\sYandex\.Metrika\scounter\s-->/,'$&<!--');

но кажется, что это не совсем изящно)

Автор: ksnk 5.7.2013, 20:14

Да, в регулярке косяк. Причем, скорее в реализации регулярок в JS вообще...
Должно быть так.

Код


data=data.replace(/<!--\s*Yandex\.Metrika(\n|\r|.)*?\/Yandex\.Metrika\s*counter -->/g,'')

Вот кто мне объяснит, почему перечисление тут работает, а перечисление символов, которое работает, к примеру, в php, тут не пашет?

Автор: Чoо 5.7.2013, 20:56

ksnk, я и не заметил, что перечисление не пашет. переписанный вариант работает. спасибо за помощь.

***
спецсимвол ? можно, наверное, не использовать?. Жадный поиск, благодаря ограничителю

Код


\/Yandex\.Metrika\s*counter -->

"съедает" все между комментов.
***