javascript - JavaScript 中动态生成的 LinkedIn 分享按钮
问题描述
在我开始之前,我应该提到我最近发布了一个类似的问题,我试图对 Twitter 做同样的事情。我最终使用了非常干净的 twttr.widgets.createShareButton 函数。这个问题可能有类似的解决方案,但我还没有通过阅读 Microsoft LinkedIn 共享插件指南找到类似的解决方案。
我正在使用详细信息和摘要标签来显示职业列表,其中每个摘要中的数据元素存储附加到网站 URL 的代码。当用户单击摘要元素时,它会创建一个超链接,指向带有该角色的功能技能列表的页面。然后我想生成一个按钮,以便网站用户可以分享到 LinkedIn。
这是我迄今为止所拥有的代码笔。我已将生成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>
非常感谢所有帮助。
解决方案
您在 中引用ln
,document.getElementById("p3").appendChild(ln);
但该变量尚未初始化。您需要将上一行更新为const ln = lnShare(fs.href);
推荐阅读
- vertica - Vertica 备份/恢复
- java - 如何在宁静的 Web 服务中将 post 请求从 xml 转换为 json
- linux - 我想在匹配后在 shell 脚本中使用 sed 命令在文件中添加 java 选项行
- firebase - 当用户无法控制他们注册的电子邮件地址时的 Firebase 安全性
- javascript - 将每个函数嵌套在量角器中
- python - 无法点击登录按钮,移动到下一页,使用带有 Python selenium 的 phantomjs
- javascript - 无法访问 vuejs 方法中的数据变量
- javascript - 在 4x4 板上均匀分布字母
- go - Golang 上传文件的 MIME 类型检查
- c# - 如何使用 LINQ 根据条件从单个数据表中找出重复的列值