如何实现页面加载后自动触发share-button按钮的点击事件？

失效核心原因 #

你之前的方案无法生效，是三个问题导致的：

• Facebook SDK是异步加载初始化的，window.onload触发时FB对象可能还没完成初始化，此时调用FB.ui会直接报错，无法触发分享逻辑
• 你的代码重复加载了两次Facebook SDK，属于冗余代码，可能引发加载异常
• 原有SDK加载逻辑里存在笔误：d.getElementsById多了s，正确写法是d.getElementById

调整后的完整代码 #

<div id="buttons">
    <div>
        <button type="button" id="share-button">Continue</button>
    </div>
</div>

<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: 'ID',
            autoLogAppEvents: true,
            xfbml: true,
            version: 'v11.0'
        });
        // FB初始化完成后再触发按钮点击
        document.getElementById('share-button').click();
    };

    document.getElementById('share-button').addEventListener('click', function () {
        FB.ui({
            display: 'popup',
            method: 'share',
            href: 'https://developers.facebook.com/docs/',
        }, function (response) {
            //Debug response (optional)
            console.log(response);
        });
    });

    //Load the JavaScript SDK asynchronously
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<!-- 删掉了重复加载的SDK标签 -->

关键改动说明 #

1. 删除了重复的Facebook SDK外部加载标签，仅保留异步加载逻辑
2. 修正了SDK加载逻辑里的getElementById笔误
3. 把自动触发点击的逻辑移到了fbAsyncInit回调的末尾，保证FB初始化完成后才触发点击，避免调用不存在的FB对象报错

注意事项 #

受浏览器安全策略限制，非用户手动交互触发的弹窗会被绝大多数浏览器默认拦截，所以自动弹出的分享窗口大概率会被浏览器拦截，该限制属于浏览器安全规则，无绕过方案。如果需要保证分享窗口正常弹出，建议保留用户手动点击按钮的逻辑。

内容的提问来源于stack exchange，提问作者Pagi Jingga