Question

我一直困惑于此已经有一段时间了，无法让它发挥作用。情况就是这样。如果人们点击某些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文件，它仍然无法正常工作。再花一天时间......这有可能实现吗？

Answer 1

这里的问题是addthis代码会在dom ready事件中触发。当您使用jQuery加载它时，dom已经加载，因此代码不会被执行。修复是在加载代码后使用addthis.init()方法强制执行代码。没有跨域问题或任何问题。

请注意，根据addthis documentation，只需通过小部件网址传递一个get变量就可以这样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');
});

Answer 2

刚刚使用了amosrivera的答案（对你来说很大的吻）并遇到了另一个问题：

添加此对象只能加载一次，因此当您在同一页面上有多个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);
  });
});

Answer 3

要回答你的官方问题，是的，我相信这是可能的。

但是，为了进一步阐述这一点，我相信您可能想要尝试使用的是外部脚本和外部标记的加载顺序。我们在处理诸如此类的异步操作时发现的有趣情况是，除非您明确说明，否则它们并不总是按照您希望的顺序完成，加载或执行。 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内容，例如手动将脚本元素附加到文档的头部，或者使用其他库等。 ..）

祝你好运！

Javascript：点击后加载AddThis

3 个答案: