使用带有 html 锚点 <a> 标记的 Twitter 小部件 javascript

Question

我正在使用 twitter for websites guide. 中的代码我已将步骤 4 中的 JavaScript 代码片段放入一个名为 tWidgit 的函数中。

此代码将文本 hyperlink 转换为推文按钮。当我对 Twitter HTML 进行硬编码时它可以工作，但它不适用于由我的 JavaScript 生成的 link。我确实在第 36 行设置了 class：

tw.class = "twitter-share-button";

JavaScript 为详细信息元素设置侦听器，并根据单击时每个摘要项的数据属性创建一个 hyperlink。我正在尝试制作一个允许用户发布 URL 推文的推文按钮。我需要使用他们的 JavaScript。这是我的 codepen.

另请参阅我附上的代码：

function tWigit() {
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  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"));  
}


const root = "https://www.onetonline.org/link/summary/";
const twt = "https://twitter.com/intent/tweet?url=https://www.onetonline.org/link/summary/";

const fs = document.createElement('a');
fs.id="FS";
const linkText = document.createTextNode("functional skills");
fs.appendChild(linkText);
fs.classList.add("hide");
fs.title = "functional skills";
fs.href = "https://www.onetonline.org/link/summary/";
//document.body.appendChild(fs);
document.getElementById("p1").appendChild(fs);

const tw = document.createElement('a');
tw.id="TW";
tw.class = "twitter-share-button";
const tweetText = document.createTextNode("Tweet");
tw.appendChild(tweetText);
tw.classList.add("hide");
tw.title = "Tweet";
tw.href = "https://twitter.com/intent/tweet?url=";
tw.target = "_blank";
document.getElementById("p2").appendChild(tw);
tWigit();

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  const isSummary = tgt.tagName==="SUMMARY";
  const code = tgt.dataset.code;
  fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    fs.href=root+code;
  }  
  tw.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    tw.href=twt+code;
  }  

  
});

.hide { display:none; }

<div id="container">
  <details id="agriculture" class="details">
    <summary>Agriculture</summary>
    <details>
      <summary data-code="53-7064.00">Picking & packing</summary>
    </details>
    <details>
      <summary data-code="45-2092.02">Farm worker</summary>
    </details>

    <details>
      <summary data-code="45-2091.00">Agricultural Equipment Operator</summary>
    </details>
    <details>
      <summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
    </details>

  </details>

  <details id="construction" class="details">
    <summary>Construction</summary>
    <details>
      <summary data-code="47-2061.00">Construction Labourer</summary>
    </details>
    <details>
      <summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
    </details>
    <details data-code="47-2051.00">
      <summary>Cement Masons and Concrete Finishers</summary>
    </details>
    <details>
      <summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>
    </details>
    <details>
      <summary data-code="47-4031.00">Fence Erector</summary>
    </details>
    <details>
      <summary data-code="17-3031.01">Surveying Technician</summary>
    </details>
  </details>
</div>

<p id="p1"></p>
<p id="p2"></p>

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

请注意使用 twttr.widgets.createShareButton 的最终代码是 here

Answer 1

创建锚标记后，您需要使用 twttr.widgets.load(); 重新加载 Twitter 小部件。检查以下代码：

(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"));

document.getElementById('twitter-wjs').addEventListener('load', function() {
  const root = "https://www.onetonline.org/link/summary/";
  const twt = "https://twitter.com/intent/tweet?url=";

  const fs = document.createElement('a');
  fs.id="FS";
  const linkText = document.createTextNode("functional skills");
  fs.appendChild(linkText);
  fs.classList.add("hide");
  fs.title = "functional skills";
  fs.href = "https://www.onetonline.org/link/summary/";
  //document.body.appendChild(fs);
  document.getElementById("p1").appendChild(fs);

  const tw = document.createElement('a');
  tw.href = "https://twitter.com/intent/tweet?url=";
  tw.className = "twitter-share-button";
  tw.innerHTML = "Tweet"
  document.getElementById("p2").appendChild(tw);
  tw.classList.add("hide");
  twttr.widgets.load();

  document.getElementById("container").addEventListener("click",function(e) {
    const tgt = e.target;
    const isSummary = tgt.tagName==="SUMMARY";
    const code = tgt.dataset.code;
    fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary && code) {
      fs.href=root+code;
    }  
    tw.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary && code) {
      tw.href=twt+code;
      twttr.widgets.load();
    }  


  });

})

使用带有 html 锚点 <a> 标记的 Twitter 小部件 javascript

Using twitter widgets with html anchor <a> tag rendered by javascript

javascript

twitter