JavaScript 中动态生成的 LinkedIn 分享按钮

Question

在我开始之前，我应该提到我最近发布了一个similar question，我试图在 Twitter 上做同样的事情。我最终使用了非常干净的 twttr.widgets.createShareButton 函数。这个问题可能有类似的解决方案，但我还没有通过阅读 Microsoft LinkedIn share-plugin 指南找到类似的解决方案。

我正在使用详细信息和摘要标签来显示职业列表，其中每个摘要中的数据元素存储附加到网站 URL 的代码。当用户单击摘要元素时，它会创建一个超链接，指向带有该角色的功能技能列表的页面。 然后我想生成一个按钮，以便网站用户可以分享到 LinkedIn。

这是我的codepen 以及我目前所拥有的。我已将生成LinkedIn 分享按钮的代码放在一个名为lnShare 的函数中。 下面的行似乎不起作用。

document.getElementById("p3").appendChild(ln)

我尝试从 lnShare 函数返回 ln，然后在调用该函数后直接调用 appendChild，但这也不起作用。我得到：

ReferenceError: ln 未定义

为了更好地说明我正在尝试做什么，codepen 展示了它与 Twitter twttr.widgets.createShareButton 函数一起使用。

这是我的代码：

function lnShare() {
console.log("lnShare started");
const ln = document.createElement('script');
ln.id="LN";
ln.type="IN/Share";
ln.setAttribute("data-url", fs.href);
//document.getElementById("p3").appendChild(ln);
console.log(ln);
return ln;  
 }

const root = "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.getElementById("p1").appendChild(fs);


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

.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>
<p id="p3"></p>
  

  <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

非常感谢所有帮助。

Answer 1

您在 document.getElementById("p3").appendChild(ln); 中引用了 ln，但该变量尚未初始化。您需要将上一行更新为const ln = lnShare(fs.href);

Answer 2

第一个问题是ln不在document.getElementById("p3").appendChild(ln)行的范围内，你可以尝试使用document.getElementById("p3").appendChild(lnShare())