Javascript 如何使ShareThis按钮键盘可访问？

我想看看是否可以将tabindex和enterkey支持添加到从外部库ShareThis加载的一些社交共享按钮（div）中。问题是，在按钮实际位于DOM中之后，我似乎无法始终如一地运行javascript。我认为，根据graph和它来自的文章，我应该能够使用window.load事件，因为它应该在异步脚本完成后激发。我总是可以在代码中从脚本中删除async属性，但是ShareThis脚本（我认为我无法控制的缩小脚本）中有一些脚本具有async属性，我认为这就是问题所在。最初，我有这样的想法：

    <script>
        function modifyShareButtons() {
            var buttons = document.getElementsByClassName('st-btn');
            for (btn of buttons) {
                btn.setAttribute('tabIndex', '0')
            }
        }
        window.addEventListener('load', (e) => modifyShareButtons());
    </script>
  <script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=12345mypropertykey12345&product=inline-share-buttons'></script>  

这是公认的非常骇客，如果ShareThis在将来更改了他们的样式名称，它将崩溃，我们将再次使用双按钮，这将是非常糟糕的。但是，它大部分是有效的。但这仍然留下了一个问题——如果我采用这种方法，我没有计算份额，这是我需要的。他们确实为此提供了API，但由于API服务器的cors策略，它不允许我获取数据：

取 '' “我的url.com”已被CORS策略阻止：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。如果不透明的响应满足您的需要，请设置请求的 模式设置为“无cors”，以获取禁用cors的资源

这告诉我的是，回到原点，基本上

这就给我留下了两个我可以想到的选择，这两个选择都是非常不可取的：

每隔一秒钟做一次间隔检查，直到按钮按下为止 加载到DOM中。不可靠的，黑客的，可能会向 检查永不停止的地方

使用变异观察者。因为ShareThis直接添加了按钮 在体内，我需要观察整个身体，我想， 我认为这在性能方面是极其昂贵的。这是 这是我不应该采取的方法

我还发现了一些其他资源：

• 我在开头附近发布的图形链接中给出的公认答案解释了jQuery的document.ready（）函数检查readyState，直到它完成后才会被调用。但是像
  在我尝试过的其他方法中，当调用此函数时，按钮仍然不在DOM中
• 他们在声明中添加了tabIndex。我的问题 他们到底是怎么做到的？他们没有说
• 不明确，不包含完整的解决方案 解决我的问题
• 这方面有相当长的篇幅，包括一些补丁。但似乎有一些独立于这些补丁的东西允许Drupal在正确的时间执行这个补丁，我不知道这个功能是什么样子的

---

我建议使用函数来创建脚本标记，而不是将其添加到HTML中

通过这种方式，您可以创建一个回调函数，该函数在主函数完成之前不会执行

<script>
    function loadSocialButtons(callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//platform-api.sharethis.com/js/sharethis.js#property=12345mypropertykey12345&product=inline-share-buttons';
        document.getElementsByTagName('head')[0].appendChild(script);
        callback();
    }

    function addProperties() {
        var buttons = document.getElementsByClassName('st-btn');
        for (btn of buttons) {
            btn.setAttribute('tabIndex', '0')
        }
    }

    loadSocialButtons(addProperties);
</script>

---

我建议使用函数来创建脚本标记，而不是将其添加到HTML中

通过这种方式，您可以创建一个回调函数，该函数在主函数完成之前不会执行

<script>
    function loadSocialButtons(callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//platform-api.sharethis.com/js/sharethis.js#property=12345mypropertykey12345&product=inline-share-buttons';
        document.getElementsByTagName('head')[0].appendChild(script);
        callback();
    }

    function addProperties() {
        var buttons = document.getElementsByClassName('st-btn');
        for (btn of buttons) {
            btn.setAttribute('tabIndex', '0')
        }
    }

    loadSocialButtons(addProperties);
</script>

function addProperties() {
    setTimeout( function(){
        var buttons = document.getElementsByClassName('st-btn');
        for (btn of buttons) {
            btn.setAttribute('tabIndex', '0')
        }
    }, 1500 );
}