Javascript: загрузить AddThis при нажатии - PullRequest
4 голосов
/ 09 июня 2011

Я долго ломал голову над этим и не могу заставить его работать.Здесь ситуация.Я хочу, чтобы панель СОЦИАЛЬНЫХ МЕДИА появлялась ТОЛЬКО, если люди нажимают на DIV.Это не должно быть загружено, если люди не нажимают div.Для социальных сетей у меня есть ДОБАВИТЬ ЭТО и значок GOOGLE + 1.Но я не могу заставить их загружаться при таком внешнем звонке.Вот код на данный момент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html');
            $.getScript('js-part.js');
    });

});
</script> 
</head> 
<body> 


<div id="socialmedia"> 
 Show the Social Media
</div> 

<div id="loadhere"> 

</div> 


</body> 
</html> 

В части HTML у меня есть информация HTML, которую нужно загрузить:

html-part.html:

<!-- AddThis Button BEGIN --> 
    <div class="addthis_toolbox addthis_default_style "> 
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
        <a class="addthis_button_tweet"></a> 
        <a class="addthis_counter addthis_pill_style"></a> 
    </div> 

    <!-- AddThis Button END --> 
    <g:plusone size="medium" id="gg"></g:plusone> 
</div> 

За часть JS я борюсь.Вот что нужно загрузить:

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

Я пытался вызывать их один за другим:

$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google.com/js/plusone.js');

Но я полагаю, что это междоменная проблема ...?

Если я использую PHP для получения контента и загружаю локальный файл PHP, он все равно не работает.Прежде чем потратить еще один день на это ... это возможно достичь?

Ответы [ 3 ]

8 голосов
/ 09 июня 2011

Проблема в том, что этот код срабатывает при событии dom ready.Когда вы загружаете его с помощью jQuery, dom уже загружен, поэтому код не выполняется.Исправление заключается в использовании метода addthis.init() для принудительного выполнения кода после загрузки кода.Нет междоменной проблемы или чего-то еще.

Обратите внимание, что согласно этой документации это возможно, просто передав переменную get через URL виджета, например http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1, но у меня это не сработало.

Я бы также рекомендовал хранить html в строковой переменной, чтобы вам не приходилось выполнять ненужные запросы для небольшого статического html.

См. Рабочую демонстрацию здесь: http://jsfiddle.net/z7zrK/3/

$("#socialmedia").click(function(){
    var add_this_html =
    '<div class="addthis_toolbox addthis_default_style ">'+
    '<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
    '<a class="addthis_button_tweet"></a>'+        
    '<a class="addthis_counter addthis_pill_style">'+
    '</a>'+ 
    '</div>'+
    '<g:plusone size="medium" id="gg"></g:plusone>';

    $("#loadhere").html(add_this_html);
    $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
    function(){
        addthis.init(); //callback function for script loading
    });  

  $.getScript('https://apis.google.com/js/plusone.js');
});
3 голосов
/ 03 ноября 2011

Только что использовал ответ amosrivera (кстати, огромный поцелуй с тобой :) и столкнулся с другой проблемой:

Addthis объект может быть загружен только один раз, поэтому, если у вас есть несколько наборов инструментов addthis на одной странице, он может работать толькодля первого нажатого набора инструментов.

Обходной путь должен сделать:

if (window.addthis){ window.addthis = null; }

перед вызовом

addthis.init();

Вот что я только что сделал, чтобы начать загружать кнопкитолько в том случае, если статья находится достаточно долго:

HTML:

<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
  .....
  <div class="sharing">
    <div class="spinner"></div>
    <div class="content"></div>
  </div>
</article>

JS:

// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
  var t;
  $("article").hover(function() {
    var that = this;
    window.clearTimeout(t);
    t = window.setTimeout(function () {
      sharing_div = $('.sharing', that);
      add_this_html = 
'<div class="addthis_toolbox addthis_default_style "> \
  <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \
  <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \
</div>';
      if (sharing_div.find('.content div').length == 0) {
        sharing_div.find('.spinner').show();
        sharing_div.find('.content').html(add_this_html);
        sharing_div.find('addthis_toolbox').attr({
          'addthis:url': $(that).attr('data-url'),
          'addthis:title': $(that).attr('data-title'),
          'addthis:description': $(that).attr('data-description'),
        })
        if (window.addthis){ window.addthis = null; } // Forces addthis to reload
        $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
          function(){
            addthis.init();
            setTimeout(function() {
              sharing_div.find('.spinner').hide();
              sharing_div.find('.content').show();
            }, 2500);
        });
      }
    }, 800);
  });
});
0 голосов
/ 09 июня 2011

Чтобы ответить на ваш официальный вопрос, да, я считаю, что этого можно достичь.

Но, чтобы уточнить это, я полагаю, что вы можете попробовать поработать с порядком загрузки внешних сценариев и внешней разметки. Интересная ситуация, с которой мы сталкиваемся, когда имеем дело с такими асинхронными действиями, заключается в том, что они не всегда завершают, загружают или выполняют в том порядке, в котором вы хотели бы, если вы специально не скажете это. jQuery позволяет вам делать это с помощью некоторых обратных вызовов, которые вы можете передать методам getScript и load.

Также не должно быть «междоменной» проблемы с файлами javascript в других доменах, хотя при загрузке HTML она, безусловно, существует.

Я не уверен, что это точно решит проблему, с которой вы столкнулись, но, похоже, стоит попробовать. Вы можете убедиться, что разметка загружается до того, как скрипты это сделают:

$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html', function() {
                // this waits until the "html-part.html" has finished loading...
                 $.getScript('js-part.js');
            });
    });
});

Теперь нам также следует спросить о том, как вы собираете свой файл "js-part.js". (Вы показали только то, что хотели, а не то, что создали.) Если это действительно файл JS, вы не можете просто использовать некоторые теги HTML <script> для загрузки других файлов JS. (Вместо этого вы захотите продолжить вызывать getScript в этом файле или использовать один из нескольких других подходов для загрузки других ваших JS-вещей, таких как добавление элементов скрипта вручную в заголовок документа или использование другой библиотеки и т. Д ... )

Удачи!

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