有没有办法制作一个分享 div 的 innerHTML 的 Facebook/Twitter 分享按钮？

Question

这是一个CodePen，可以帮助解释我在做什么。

我有一个使用 Javascript 生成随机事实的网站，并将其放入 div 和 id="fact"。在div 下方是一个简单的“在 Twitter 上分享”链接，使用的是我在网上找到的一个非常基本的分享链接：

http://twitter.com/share?url=http://www.thewikifix.com&text=Simple Share Buttons&hashtags=thewikifix

这很好用，而且很简单，但我想知道是否有办法分享

<div id="fact"></div>。

基本上，而不是

"text=SimpleShareButtons"

应该是

"text={document.getElementId("fact").innerHTML}"

（显然第二部分是虚构的，我知道我不能只将 Javascript 字符串放入 HTML 中的链接中）。

有没有办法做我正在做的事情？即使是完全不同的方式也是受欢迎的。

Answer 1

为简单起见，对 HTML 进行了两项更改。这是fiddle 代码，应该可以满足您的需求：

[css 未更改]

HTML：

<p id="fact">Babe Ruth once pitched a 4-pitch walk to start a game, got angry at the umpire's calls, and punched him, getting ejected. Reliever Ernie Shore came in and retired every batter for a combined no-hitter.</p>
<p id="sharing"><a id="factLink" href="#" target="_blank">share on twitter</a>
</p>

JS/JQUERY：

 $('#factLink').click(function () {

    // Get the fact text
    var factText = $('#fact').text();

    // Convert to string
    var factStr = factText.toString();

    // Fact length
    var factLen = factText.length;

    // This section formats the text that is too long, remove it if needed
    if (factLen > 103) { // max chacters allowed
        // trim, and allow space for '...'"
        var trimFact = factStr.substring(0, 100);
        var trimFact = trimFact.trim(); //<-- ensures the last character isnt ' '
        factStr = trimFact + "...";
    }

    // Update the link
    var linkRef = "http://twitter.com/share?url=http://www.thewikifix.com&text=" + factStr + "&hashtags=thewikifix";

    $('#factLink').attr('href', linkRef);

});

希望这会有所帮助！

Answer 2

您的伪代码几乎正是您想要做的。您只需将其作为变量传递

var inner = document.getElementId("fact").innerHTML;
"text=" + inner