javascript - 推特分享按钮怪癖

Question

链接到我的代码笔:codepen.io/neel111/pen/dRBQNY?editors=1010

单击推文按钮后，它会重定向到在 Twitter 中发推文的页面，并带有预选的推文文本。
下面给出了其中使用的 JavaScript 代码，仅供快速浏览:

    //-------------quotes--------
    (function(){

      window.addEventListener("load", makeRequest);

      function makeRequest(mk){  
        document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest);
        function reqListener(rl) {
          if(httpR.readyState === XMLHttpRequest.DONE) {
            var quote;
            if(httpR.status === 200) {
                quote = JSON.parse(httpR.responseText);
              document.getElementsByClassName("quote")[0].innerHTML = quote[0].body;
            } else {
              alert("There was a problem with the request!")
            }
          }
        }    
        var httpR;
        httpR = new XMLHttpRequest();
        httpR.onreadystatechange = reqListener
        httpR.open("GET", "https://quote-api.glitch.me/pull/1", true);
        httpR.send();
      }

      //----------------------tweet-------------------

     window.addEventListener("load", function() {
        document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
     })
      function tweetEvent(twt) {
        //twt.preventDefault();
        document.getElementsByClassName("quote")[0].normalize();
        var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
        var URLBase = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href");
        var URLExtended = URLBase + "?hashtags=quotes&text=" + encodeURIComponent(tweetBody);
        document.getElementsByClassName("twitter-share-button")[0].setAttribute("href", URLExtended);
      }

    })();

怪癖:
当页面加载/刷新后第一次单击推文按钮时，重定向页面中预选的推文文本为
Preselected_text(quote)_from_the_main_page #tweet

但是在第一次单击之后，每次单击推文按钮时，重定向页面中预选的文本都会发推文
Preselected_text(quote)_from_the_main_page?hashtags=quotes #quotes

我哪里做错了？

Answer 1

所以我认为问题在于你正在修改 anchor 标记的href并将修改后的href插入到dom中。我要做的就是摆脱按钮中的 并像您一样构建 url，但不要修改 dom 中的某些内容，只需调用 window.open(extendedUrl);

类似这样的事情应该可以帮助您开始:

window.addEventListener("load", function() {
    document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
 })
  function tweetEvent(twt) {
    //twt.preventDefault();
    document.getElementsByClassName("quote")[0].normalize();
    var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
    var url = "https://twitter.com/intent/tweet?hashtags=quote&text="+encodeURIComponent(tweetBody);
    return window.open(url);
  }

})

如您所见，我简化了 url 构建，然后将生成的 url 传递给 window.open，这将在新窗口/选项卡中打开 url(取决于浏览器中的用户首选项...查找有关 here 的更多信息)。