如何使用JavaScript函数动态创建自定义URL的“分享此按钮”？

Question

如何使用JavaScript函数动态创建自定义URL的“分享此按钮”？

9

我正在使用http://sharethis.com/按钮，为网站用户提供一个简单的分享内容的方式。

他们在这里提供有关“自定义按钮”的信息：http://help.sharethis.com/customization/custom-buttons 看起来要指定URL，在示例中他们只是使用以下HTML代码：

<span class="st_sharethis" st_url="http://mycustomurl.com" st_title="Sharing Rocks!"
displayText="ShareThis"></span>

但是我需要能够动态地创建按钮，而不需要重新加载页面。

在我正在构建的 Flash 应用程序中，有一个“分享按钮”，它触发网页上的 JavaScript 函数，使一个“弹出” div 渐渐淡入屏幕中心，我希望在其中显示分享按钮。根据某人点击的分享按钮，它将需要具有动态创建的 URL。

如果他们关闭对话框，然后再次点击分享按钮，我希望代码只会用新的按钮覆盖旧的代码，包括新的 URL/标题。

因此，我创建了这个 JavaScript 函数，从 Flash 中调用该函数，并传递来自 Flash 的 URL。我将脚本和所有内容放置在我的“弹出”div 中，希望按钮将在该 div 内部呈现。

function shareChannel(theurl)
{
//I cant seem to find an example of what to put here to load the buttons, and give them a custom URL and title

//finally display the popup after the buttons are made and setup.
displaypopup();
}

有没有可能提供一个示例，让我在不重新加载页面的情况下完成这个操作？

编辑： @Cubed

<script type="text/javascript">
function shareChannel(chaan)
          {

          document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
          document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');

          stButtons.locateElements();

          centerPopupThree();
          loadPopupThree();
          }

</script>

基本上没有任何反应。我不喜欢使用JavaScript，因为我真的不知道如何获取错误消息或进行调试。当我使用flex工作时，我有一个很棒的调试器/控制台来玩耍。所以，很抱歉我无法提供更多信息。我注意到当我删除只有

时...

document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
              document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');

弹出窗口出现了。

但是，如果我将上述setAttribute代码放在函数内部，弹出窗口就永远不会出现，所以我认为代码中的某些内容正在破坏它。有什么建议吗？或者至少有一种方法可以让我使用Chrome告诉我错误是什么？我尝试了检查元素控制台，但在触发函数时没有任何东西出现。

此外，在我的代码顶部，他们让我使用：

    <script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">
</script><script type="text/javascript">stLight.options({publisher:'mypubidgoeshere'});</script>

我应该使用stLight.locateElements();还是stButtons.locateElements();呢？

- brybam

代码中有一个错别字，你写成了'chann'和'chaan'，这就是为什么它不能工作的原因。将标题中的'chann'更改为'chaan'，它应该能奇迹般地工作。值得一提的是，在Chrome浏览器中，通过"工具">"JavaScript控制台"可以进入调试器。如果在更改之前进入那里，它应该会出现一个错误'Uncaught ReferenceError: chann is not defined'。 - Cubed Eye

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cubed Eye · Accepted Answer

我一直在使用

stButtons.locateElements();

编写一个函数以在通过 AJAX 加载内容后生成任何新按钮，我想它也适用于此。

这个问题可能也能提供一些帮助:

Sharethis button does not work on pages loaded via ajax

更好的解决方案：

创建一个 <div> 并确保所有的 <span> 都有 ID，否则你可以给它们添加类，但你需要遍历它们。

function shareChannel(theurl, thetitle)
    {
    document.getElementById('spanID1').setAttribute('st_url', theurl);
    document.getElementById('spanID1').setAttribute('st_title', thetitle);

    stButtons.locateElements();

    //finally display the popup after the buttons are made and setup.
    displaypopup();
    }