javascript - 调整 Twitter 按钮而不重新加载？

Question

我有一个随机报价生成器，可以发送显示的随机报价，除了每次生成新报价时 Twitter 按钮都必须重新加载之外，一切正常，而且看起来不太好。有没有什么方法可以更改 iframe 而无需烦人的重新加载？

链接到codepen-http://codepen.io/Davez01d/pen/gPegpd

html -

<div class="row vert-space-25 vert-bottom-space-25 text-center"><!--twitterbutton-->
  <div id="twitter-button" class="col-xs-12">
    <a class="twitter-share-button" data-size="large">Tweet</a>
    <!--javascript for twitter button-->
    <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))returnt;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
  </div>
</div><!--twitterbutton-->

javascript -

var quotes = [
  { text: '"She got a big booty so I call her big booty"', author: '2Chainz'}, 
  { text: '"Success consists of going from failure to failure without loss of enthusiasm."', author: 'Winston Churchill'}, 
  { text: '"If you\'re going through hell, keep going."', author: 'Winston Churchill'},
  { text: '"Success is not final, failure is not fatal: it is the courage to continue that counts."', author: 'Winston Churchill'},
  { text: '"Nearly all men can stand adversity, but if you want to test a man\'s character, give him power."', author: 'Abraham Lincoln'},
  { text: '"Whatever you are, be a good one."', author: 'Abraham Lincoln'},
  { text: '"I walk slowly, but I never walk backward."', author: 'Abraham Lincoln'},
];

$("#newQuote").click(function() { 
  var randomNum = Math.floor(Math.random() * quotes.length); //get random number between 0 and quotes.length
  $("#quote").html(quotes[randomNum].text); //insert the random quote into the html
  $("#author").html(" -" + quotes[randomNum].author); //insert the author into the html
  createButton(); //creates a new twitter button, when shared will have the displayed quote and author
});

var createButton = function () {
  $('iframe.twitter-share-button,a.twitter-share-button').remove(); //removes the iframe generated by twitter widgets js
  var twtr = '<a class="twitter-share-button"></a>';
  $('#twitter-button').append(twtr); //creates new twitter button
  $('.twitter-share-button').attr('href', 'https://twitter.com/share') 
  .attr('data-text', $('#quote').html()+$('#author').html()).attr('data-size', 'large'); //sets attributes on the new twitter button so when shared it displays the quote and author
  twttr.widgets.load(); //reloads the js for the twitter button
};

Answer 1

不。出于安全原因，页面上的 JavaScript 无法访问该页面上驻留在其他域中的 iframe。如果您同时控制主机页面和iframe中的页面，则可以使用 postMessage在它们之间传递消息。

但是，您需要使用 Twitter iframe 按钮吗？还有其他方法可以使用 JavaScript 分享到 Twitter。一种简单的方法就是编写一个分享 URL:https://twitter.com/share?text=xxx&url=yyy

其中 xxx 是您的推文文本，yyy 是包含文本链接的 URL。请务必对 xxx 和 yyy 进行 url 编码。

因此您可以使用自己的按钮或链接来完成同样的事情。