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

【问题标题】：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 中链接的问题。我没有找到正确删除分享按钮的方法。但也许你可以生成几个按钮并隐藏不必要的。

标签： javascript linkedin social-media linkedin-jsapi share-button

【解决方案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 错误。