如何使用带有 javascript 函数的自定义 URL 动态创建“共享此按钮”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7289021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically create "Share This buttons" with a custom URLs with a javascript function?
提问by brybam
im using the http://sharethis.com/buttons to give users on a website a simple way to share content.
我使用http://sharethis.com/按钮为网站上的用户提供一种共享内容的简单方法。
They have information on "custom buttons" here: http://help.sharethis.com/customization/custom-buttons
他们在此处提供有关“自定义按钮”的信息：http: //help.sharethis.com/customization/custom-buttons
It looks like to specify the URL, in the example all they have its just html like this:
看起来像是指定了 URL，在示例中，它们只有这样的 html：
<span class="st_sharethis" st_url="http://mycustomurl.com" st_title="Sharing Rocks!"
displayText="ShareThis"></span>
But I need to be able to dynamically create buttons on the fly without reloading the page.
但我需要能够在不重新加载页面的情况下动态创建按钮。
So, In a flash application i'm building i have a "share button" that triggers a javascript function on the webpage that makes a "popup" div fade into the center of the screen that I want to display the share buttons. Depending on what share button someone clicks it will need to have a dynamically created URL.
因此，在我正在构建的 Flash 应用程序中，我有一个“共享按钮”，它触发网页上的 javascript 函数，使“弹出”div 淡入我想要显示共享按钮的屏幕中心。根据某人单击的共享按钮，它需要有一个动态创建的 URL。
It's important if they close the dialog, then click the share button again, im hoping the code will just overwrite the old code with new buttons, with the new url/titles.
如果他们关闭对话框，然后再次单击共享按钮，我希望代码只会用新按钮和新的 url/标题覆盖旧代码，这一点很重要。
So, i created this javascript function that I call from flash, while passing the url from flash. I placed the script and everything inside my "popup" div, hoping that the buttons will be rendered inside that div.
所以，我创建了这个从 flash 调用的 javascript 函数，同时从 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();
}
could anyone possibly post an example of how I might be able to do this without ever reloading the page?
任何人都可以发布一个示例，说明我如何在不重新加载页面的情况下做到这一点？
EDIT: @Cubed
编辑：@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>
Basically nothing happens. I hate using javascript because I really have no idea how to get error messages or debug. When I work with flex, I have a great debugger/console to messaround with. So, sorry im having trouble providing more info. I did notice when I remove just the
基本上什么都没发生。我讨厌使用 javascript，因为我真的不知道如何获取错误消息或调试。当我使用 flex 时，我有一个很棒的调试器/控制台可以使用。所以，抱歉，我无法提供更多信息。当我只删除
document.getElementById('spID1').setAttribute('st_url', 'http://mycustomurl?chan='+chaan);
document.getElementById('spID1').setAttribute('st_title', 'Custom Title is ['+chann+'] it works!');
The popup appears.
弹出窗口出现。
But if I have the above setAttribute code inside the function, the popup never appears, so im assuming something in that code is breaking it. Any suggestions? Or at least a way I could use chrome to tell me what the error is? I tried the inspect element console but there was nothing that appeared there when i triggered the function.
但是如果我在函数中有上面的 setAttribute 代码，则弹出窗口永远不会出现，所以我假设该代码中的某些内容正在破坏它。有什么建议？或者至少我可以使用 chrome 来告诉我错误是什么？我尝试了检查元素控制台，但是当我触发该功能时，那里什么也没有出现。
Also, in at the top of my code they had me use:
此外，在我的代码顶部，他们让我使用：
<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>
Should I be using
stLight.locateElements();rather than stButtons.locateElements();
我应该使用
stLight.locateElements();而不是stButtons.locateElements();
回答by Cubed Eye
I've been using the
我一直在使用
stButtons.locateElements();
function to generate any new buttons after loading content via AJAX, I imagine it will work for this too.
通过 AJAX 加载内容后生成任何新按钮的功能，我想它也适用于此。
This question might be of some assistance also:
这个问题也可能有一些帮助：
Sharethis button does not work on pages loaded via ajax
Sharethis 按钮在通过 ajax 加载的页面上不起作用
Better Solution:
更好的解决方案：
Make your <div>and make sure all the <span>s have IDs, otherwise you can give them classes but you will need to iterate through them all.
制作你的<div>并确保所有的<span>s 都有 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();
}
