twitter分享按钮怪癖

时间:2017-07-21 12:42:56

标签: javascript events

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

当点击推文按钮时,它会重定向到推文的页面,推文上有预选的文字。
下面给出了用于快速查看的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

我做错了什么?

1 个答案:

答案 0 :(得分:1)

所以我认为问题在于您正在修改锚标记的href并将修改后的href插入到dom中。我要做的是取消按钮并像你一样构建网址,而不是修改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(取决于浏览器中的用户首选项...在{ {3}})。