百度分享异步加载、分页，无效果解决

最新推荐文章于 2020-11-23 10:39:58 发布

qq_22271343

最新推荐文章于 2020-11-23 10:39:58 发布

阅读量545

点赞数

使用百度分享的时候，如果所涉及到的html部分是后加载进来的，如ajax等异步请求成功后，加载进来，那么百度分享就有可能出现错误。
我在使用的时候，遇到了两个问题。在这里记录一下。
1、无法把所需要分享的内容传值到百度分享里。
百度分享的配置里有两个值，bdText，bdDesc，这两个内容，分别分享标题和内容。
内容是异步加载进来的，所以在百度分享相关代码是在加载成功后运行的。但是，在使用中，始终无法将想分享的内容，传值给bdText，bdDesc。
后来，在百度分享的api里发现了一个事件：onBeforeClick，在分享前的点击事件。于是我就先获取鼠标所在元素，然后在onBeforeClick事件里，根据鼠标所在元素定位获取到所需要分享的内容，进行传值。
2、分页时，百度分享无效。

当点击到第二个及以后时，百度分享无效。通过百度查，找到了解决方案。因为百度分享执行后，会创建全局的window._bd_share_main，所以需要在 ajax请求完成后执行一下：window._bd_share_main.init(); 根据这个解决方案，最终解决了问题。

//分享功能

    if (window._bd_share_main) {
        window._bd_share_main.init();
    }


    var Title = '';
    var Desc = '';
    var Url = '';
    $('body').on('mouseover', '.bdsharebuttonbox a', function () {
        Title = $(this).data('title');
        Desc = $(this).data('desc');
        Url = $(this).data('url');
    });
    function SetShare(cmd, config) {
        if (Title) {
            config.bdText = Title + "";
        }
        if (Desc) {
            config.bdDesc = Desc + "";
        }
        if (Url) {
            config.bdUrl = Url + "";
        }
        return config;
    }

    window._bd_share_config = {
        "common":
        {
            onBeforeClick: SetShare,
            "bdSnsKey": {},
            "bdText": "",
            "bdDesc": "",
            "bdUrl": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "1",
            "bdSize": "16"

        },
        "share": {}
    }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];

这样就解决问题了