Question

我正在研究一个随机引用生成器，并且希望在我的＆＃34; newQuote＆＃34;之后让我的twitter按钮的数据文本更新。按下按钮。

当我点击newQuote按钮时，我的页面会显示随机选择的报价。我想它，所以twitter按钮推文显示当前的随机报价。

第一次按下newQuote按钮时它会起作用，但之后，twitter按钮不会自动更新。

HTML：

<button type = "button" id ="newQuote">
New Quote  
</button>

<div>
<a id = "twitter-button"></a>
</div>

使用Javascript：

 var quotes = [
  "Circumstances-what are circumstances? I make circumstances",
  "Life isn't about finding yourself. Life is about creating yourself.",
  "Worry is a misuse of the imagination",

];

var authors = [
  "Napolean",
  "George Bernard Shaw",
  "Dan Zadra",

];

window.onload = function() {
  document.getElementById("newQuote").onclick = function() {
    var random = Math.floor(Math.random() * (quotes.length));
    document.getElementById("quote").innerHTML = quotes[random];
    document.getElementById("author").innerHTML = authors[random];
    createButton();
  }  
  }

function createButton() { 
      var msg = document.getElementById("quote").innerHTML;
      var tweetDiv = document.getElementById("twitter-button");
      var link = document.createElement("a");

      link.setAttribute("href", "https://twitter.com/share");
      link.setAttribute("class", "twitter-share-button");
      link.setAttribute('id', 'twitter');
      link.setAttribute("data-text", "" + msg + "");
      link.setAttribute("data-size", "large");
      tweetDiv.parentNode.replaceChild(link, tweetDiv);
      twttr.widgets.load();
}


! 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');

Answer 1

问题是您使用的ID为twitter-button。

但是只要加载Twitter Widget，它就会用没有该ID的iframe替换该锚点，因此您的代码将停止工作。解决此问题的方法是将该锚点更改为使用CSS类twitter-share-button，因为生成的iframe也附加了此类。

然后，而不是做：

// HTML
<a id = "twitter-button"></a>
// CSS
var tweetDiv = document.getElementById("twitter-button");

您将其更改为：

// HTML
<a class="twitter-share-button"></a>
// JS
var tweetDiv = document.querySelector(".twitter-share-button");

看一下下面的例子：

<button type="button" id="newQuote">
  New Quote
</button>

<div>
  <div id="quote"></div>
  <div id="author"></div>
  <a class="twitter-share-button"></a>
</div>

<script>
  var quotes = [
    "Circumstances-what are circumstances? I make circumstances",
    "Life isn't about finding yourself. Life is about creating yourself.",
    "Worry is a misuse of the imagination",

  ];

  var authors = [
    "Napolean",
    "George Bernard Shaw",
    "Dan Zadra",

  ];

  window.onload = function() {
    document.getElementById("newQuote").onclick = function() {
      var random = Math.floor(Math.random() * (quotes.length));
      document.getElementById("quote").innerHTML = quotes[random];
      document.getElementById("author").innerHTML = authors[random];
      createButton();
    }
  }

  function createButton() {
    var msg = document.getElementById("quote").innerHTML;
    var tweetDiv = document.querySelector(".twitter-share-button");
    var link = document.createElement("a");

    link.setAttribute("href", "https://twitter.com/share");
    link.setAttribute("class", "twitter-share-button");
    link.setAttribute('id', 'twitter');
    link.setAttribute("data-text", "" + msg + "");
    link.setAttribute("data-size", "large");
    tweetDiv.parentNode.replaceChild(link, tweetDiv);
    twttr.widgets.load();
  }


  ! 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');
</script>

Answer 2

您可以在下次无法获取function createButton() { var msg = document.getElementById("quote").innerHTML; if(document.getElementById("twitter").length) return document.getElementById("twitter").setAttribute("data-text",msg); var tweetDiv = document.getElementById("twitter-button"); var link = document.createElement("a"); link.setAttribute("href", "https://twitter.com/share"); link.setAttribute("class", "twitter-share-button"); link.setAttribute('id', 'twitter'); link.setAttribute("data-text", "" + msg + ""); link.setAttribute("data-size", "large"); tweetDiv.parentNode.replaceChild(link, tweetDiv); twttr.widgets.load(); } id

时第一次覆盖父元素

像这样更新您的功能

- (void)textViewDidChange:(UITextView *)textView
{
    CGFloat fixedWidth = textView.frame.size.width;
    CGSize newSize = [textView sizeThatFits:CGSizeMake(fixedWidth, MAXFLOAT)];
    CGRect newFrame = textView.frame;
    newFrame.size = CGSizeMake(fmaxf(newSize.width, fixedWidth), newSize.height);
    textView.frame = newFrame;
}

在Javascript中为twitter按钮动态更新数据文本

2 个答案: