如何动态更改链接的共享按钮的布局？

Posted 2023-03-14

【中文标题】如何动态更改链接的共享按钮的布局？

【英文标题】：How can you change the layout of a linked-in share button dynamically?

【发布时间】：2015-03-13 09:28:01

【问题描述】：

LinkedIn 分享按钮可以通过以下代码添加到页面：

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

我希望能够动态地将数据计数器更改为位于按钮顶部。

为此，我删除了旧的LinkedIn button 并添加了一个新的，代码如下：

addScript = function(counterPosition) 
    mainElement = document.getElementById("scripts-go-here");
    d = document.createElement("script");
    d.type="IN/Share";
    d.setAttribute("type", "IN/Share");
    d.setAttribute("data-counter", counterPosition);

    // Reset the current element, since we only want to change the layout of the button
    while(mainElement.firstChild) 
        mainElement.removeChild(mainElement.firstChild);
    
    mainElement.appendChild(d);
    IN.parse();


addScript("right");
addScript("top");

问题在于，正如you can see in this jsfiddle，不久之后出现了一些 JS 错误：

“未捕获的 TypeError：无法将属性 'innerhtml' 设置为 null”

为什么会发生这种情况，我该如何解决？

这是 Linkedin 的 jsApi 的问题吗？

【问题讨论】：

你为什么要在同一个元素中添加两次按钮？如果您注释掉两个 addScript 之一，它可以正常工作。

我猜，但是页面上有更多按钮会不会出现性能问题？即使我隐藏了一个，linkedin 事件仍然与元素相关联。我想我想要的是一种删除 Linkedin api 创建的所有事件的方法，这样一旦我隐藏或删除元素 => 没有错误，没有性能问题。

在 api self object(IN) 中，它包含旧元素缓存，因此当您删除按钮的原始元素时，这会导致 IN 对象内部为 null。所以我认为在这种情况下您还应该刷新 IN 对象。

感谢您的建议，如果您愿意，请随时将其添加为答案。我想试试这个，但是当你说“刷新 IN 对象”时，你的意思是 IN.init() 吗？因为我尝试在上面的JSFiddle中使用IN.init()，JS错误依旧存在。

我调试了您的小提琴并发现，只有当您删除上一个按钮时才会引发该错误。看起来 JS API 中的链接订阅了诸如“getShareCount”之类的内部函数，并尝试更新已删除的按钮（小部件）。看起来这是在 JS API 中链接的问题。我没有找到正确删除分享按钮的方法。但也许你可以生成几个按钮并隐藏不必要的。

【参考方案1】：

似乎您没有传递应该在IN.parse(domNode) 方法中解析其内容的节点

解析标签

当框架加载时，它会自动扫描文档并 呈现任何 LinkedIn 特定的标签。有时，您可以动态地 更改 DOM 的内容和新的 LinkedIn 标签需要 解析。如果平台已经加载，你可以重新解析新的 带有以下 JavaScript 的 IN 标记：

IN.parse(domNode)

其中 domNode 是其内容应该是的节点 已解析（例如，使用 document.body 触发重新解析整个 页）。

尝试了一些new things with your example，我认为这+init 是你错误的原因（它不同于this example)

<script type="IN/Share+init" data-counter="top"></script>

这是否发生在您的应用程序中？

【讨论】：

感谢您的回复，但您误解了问题：脚本工作正常，但如果您打开检查器窗口，您在第二次调用 addScript 时会遇到错误。那是我要修复的错误，事实上我无法动态（多次）更改linkedIn按钮而不会出现来自LinkedIn API的JS错误

抱歉，我知道了。你读过IN.parse(domNode) 文档吗？似乎您没有传递应解析其内容的节点。参考：developer.linkedin.com/documents/inauth-inevent-and-inui

这个错误是在你的应用程序中运行还是在 JSFiddle 上运行时出现的？

两者都出现了，我传入了正确的节点。即使在您的示例中，删除 LinkedIn 元素并添加新元素时仍然会出现 Javascript 错误。