Twitter 分享按钮 - 来自变量的内容

Question

当单击“新报价”按钮时，我通过变量将这些报价随机传递给段落。

我希望用户能够在 Twitter 上分享当前加载的报价。 我尝试将“数据文本”属性的值设置为等于当前变量，但它似乎不起作用。 到目前为止我的代码： http://codepen.io/RycerzPegaza/pen/YypZza

// HTML //

    <ul id="tweet"><a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="">share the quote</a></ul>

  <ul class="pager">
    <li onclick="randomquote()"><button type="button" class="btn btn-default"> a new qoute</button></li></ul></nav></div></div></body>

// JAVASCRIPT //

// Twitter script
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
//

// RANDOM BACKGROUND

randomcover = function(){
var covers = [];
covers[0] = " #222 url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed";
covers[1] = " #222 url('https://farm6.staticflickr.com/5255/5419581943_5826526eb4_o.jpg') no-repeat center center fixed";
covers[2] = " #222 url('http://www.splitshire.com/wp-content/uploads/2015/09/SplitShire-6272.jpg') no-repeat center center fixed"
 // FADE IN EFFECT 
  $("li").click(function() {
   var aCover = covers[Math.floor(Math.random()*covers.length)];
  $currImg = $("body").css({background:aCover})
  });
};
// QUOTE MACHINE
randomquote = function() {
  var quotesArray = [];
quotesArray[0] = "One day I will find the right words, and they will be simple. <br> ― Jack Kerouac, The Dharma Bums";
quotesArray[1] = "Live, travel, adventure, bless, and don't be sorry. <br> ― Jack Kerouac";
quotesArray[2] = "My fault, my failure, is not in the passions I have, but in my lack of control of them. <br> ― Jack Kerouac";
quotesArray[3] = "the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars. <br> ― Jack Kerouac";
quotesArray[4] = "The only truth is music. <br> ― Jack Kerouac";
quotesArray[5] = "The best teacher is experience and not through someone's distorted point of view. <br> ― Jack Kerouac";
quotesArray[6] = "Great things are not accomplished by those who yield to trends and fads and popular opinion. <br> ― Jack Kerouac"; 
quotesArray[7] = "Don't use the phone. People are never ready to answer it. Use poetry. <br> ― Jack Kerouac";
quotesArray[8] = "Will you love me in December as you do in May?<br> ― Jack Kerouac";
quotesArray[9] = "My witness is the empty sky. <br> ― Jack Kerouac";
quotesArray[10] = "Maybe that's what life is... a wink of the eye and winking stars. <br> - Jack Kerouac";
quotesArray[11] = "All human beings are also dream beings. Dreaming ties all mankind together. <br> -- Jack Kerouac";
quotesArray[12] = "Forgive everyone for your own sins and be sure to tell them you love them which you do. <br> - Jack Kerouac";
  quotesArray[13] = "Because in the end, you won’t remember the time you spent working in the office or moving your lawn. Climb that goddamn mountain. <br> - Jack Kerouac";
  quotesArray[14] = "So therefore I dedicate myself, to my art, my sleep, my dreams, my labours, my suffrances, my loneliness, my unique madness, my endless absorption and hunger because I cannot dedicate myself to any fellow being. <br> - Jack Kerouac";
  quotesArray[15] = "Never Say a Commonplace Thing. <br> - Jack Kerouac";

 var newquote = quotesArray[Math.floor((Math.random()*15))];
      document.getElementById('content').innerHTML = newquote;
      document.querySelector(".twitter-share-button")[0].setAttribute("data-text", newquote);
    };

Answer 1

我从未使用过 twitter API，但如果您在页面加载后动态更新 data-text 方法并且 twitter js 已运行，则认为它不会起作用。我会尝试改用Web Intents 方法（见页面底部），这意味着您可以将text 的查询参数添加到推特分享网址。一定要对文本进行 url 编码。每当引用发生变化时，您都需要更新 <a> 标签的 href。

Answer 2

网络意图代码不起作用。

完整代码的codepen链接：http://codepen.io/RycerzPegaza/pen/NGpEGp

<a href="https://twitter.com/share?
      url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
      via=twitterdev&
      related=twitterapi%2Ctwitter&
      hashtags=example%2Cdemo&
      text=custom%20share%20text">
    Tweet
    </a>

我尝试通过动态更改 iframe src + 将引用编码到 url（为空格添加 %20）来使用 iframe，但它也不起作用：

//HTML //

    <iframe
 src="https://platform.twitter.com/widgets/tweet_button.html?size=l&text=custom%20share"
  width="140"
  height="100"
  title="Twitter Tweet Button"
  style="border: 0; overflow: hidden;">
</iframe>

// JS //

    // QUOTE MACHINE
randomquote = function() {
  var quotesArray = [];
quotesArray[0] = "One day I will find the right words, and they will be simple. <br> ― Jack Kerouac, The Dharma Bums";
quotesArray[1] = "Live, travel, adventure, bless, and don't be sorry. <br> ― Jack Kerouac";
quotesArray[2] = "My fault, my failure, is not in the passions I have, but in my lack of control of them. <br> ― Jack Kerouac";
quotesArray[3] = "the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars. <br> ― Jack Kerouac";
quotesArray[4] = "The only truth is music. <br> ― Jack Kerouac";
quotesArray[5] = "The best teacher is experience and not through someone's distorted point of view. <br> ― Jack Kerouac";
quotesArray[6] = "Great things are not accomplished by those who yield to trends and fads and popular opinion. <br> ― Jack Kerouac"; 
quotesArray[7] = "Don't use the phone. People are never ready to answer it. Use poetry. <br> ― Jack Kerouac";
quotesArray[8] = "Will you love me in December as you do in May?<br> ― Jack Kerouac";
quotesArray[9] = "My witness is the empty sky. <br> ― Jack Kerouac";
quotesArray[10] = "Maybe that's what life is... a wink of the eye and winking stars. <br> - Jack Kerouac";
quotesArray[11] = "All human beings are also dream beings. Dreaming ties all mankind together. <br> -- Jack Kerouac";
quotesArray[12] = "Forgive everyone for your own sins and be sure to tell them you love them which you do. <br> - Jack Kerouac";
  quotesArray[13] = "Because in the end, you won’t remember the time you spent working in the office or moving your lawn. Climb that goddamn mountain. <br> - Jack Kerouac";
  quotesArray[14] = "So therefore I dedicate myself, to my art, my sleep, my dreams, my labours, my suffrances, my loneliness, my unique madness, my endless absorption and hunger because I cannot dedicate myself to any fellow being. <br> - Jack Kerouac";
  quotesArray[15] = "Never Say a Commonplace Thing. <br> - Jack Kerouac";
  var newquote = quotesArray[Math.floor((Math.random()*15))];
  document.getElementById('content').innerHTML = newquote;

  var newquote = str.split("%20");
  document.getElementsByTagName("iframe")[0].setAttribute("src", "https://platform.twitter.com/widgets/tweet_button.html?size=l&text=" + newquote);

};