百度分享 去掉微信二维码分享下的文字提示

需求

boss的心思你别猜，猜来猜去也猜不明白！！！

问题：boss觉得这个分享下的文字太low，所以最好 更换，再不济也要去掉

解决方案

在这里，我使用的是百度分享插件，看了看引入的代码，

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

顿时觉得改源码没戏

上页面看了看这段html的结构，大致如下

<div id="bdshare_weixin_qrcode_dialog" class="bd_weixin_popup" data-url="http://localhost:5941/bllxj/travel_147.html" style="display: block; left: 355px; top: 1019px;  240px; height: 293px;"><div class="bd_weixin_popup_head"><span>分享到微信朋友圈</span><a href="#" onclick="return false;" class="bd_weixin_popup_close">×</a></div><div id="bdshare_weixin_qrcode_dialog_qr" class="bd_weixin_popup_main" style="display: block;"><table style="direction:ltr;border: 0; 203px; border-collapse: collapse;background-color:#fff;margin:0 auto;" align="center"></table></div><div class="bd_weixin_popup_foot">打开微信，点击底部的“发现”，<br>使用“扫一扫”即可将网页分享至朋友圈。</div></div>

而class为bd_weixin_popup_foot的div中就是我们要替换的内容，如果想直接去掉，可以直接display:none !improtant搞定.
测试了一下，没毛病

那接下来就看看怎么更换内容吧

点击微信分享按钮后,先生成了如上所示的html代码,然后附加到了页面末尾. 这一过程,貌似没有办法参与进去,就只有在附加完成后再处理了,所以,思路就出来了:先将这部分代码css 设置为display:none !important (测试了一下,貌似不加important会被覆盖,但这又会导致另一个问题：如何利用 jQuery 修改 css 中带有 !important 的样式属性？,还好也有处理方式),然后通过js手动更改里面的内容,完成后再设置为display:block.

这里面只存在一个问题：何时使用js替换内容,初始思路是给点击的a标签添加click事件,来处理,但不知道百度分享插件内部对a标签的事件做了什么处理,有可能会引出其他错误. 还好,百度分享插件还提供了另一个方法onAfterClick,虽然这方法本意是拿来统计分享数的,不过也还是可以用一用. 哈哈

上面提到的两种监听方式都还存在一个问题,那就是方法响应时,相应的html还没生成完,页面上还不存在这个结构,自然也就不要说替换了 但思路还是很简单,用setTimeout循环判断呗,直到页面元素存在,才进行判断

在这个过程中,还遇到了另一个问题：弹出框的高度是订好了的，就避免不了文字出界,所以需要设置heigth:auto

css修改:

.bd_weixin_popup {
    display: none !important;
}

js修改:

onAfterClick: function (cmd) {
    if (cmd === 'weixin') {
        var t = setTimeout(function () {
            if ($('#bdshare_weixin_qrcode_dialog').length > 0) {
                clearTimeout(t);
                $('.bd_weixin_popup_foot').html('测试新加内容');
                $('#bdshare_weixin_qrcode_dialog').css('height','auto');
                var cssText = $('#bdshare_weixin_qrcode_dialog').attr('style') + ';display:block !important;';
                $('#bdshare_weixin_qrcode_dialog').css('cssText', cssText);
            }
        },500);
    }
}

ps:原本只是删除，就一时兴起试了试更换，没想过过了一周，真的要改，删除已经不行了。。。 无言
然后发现当对整个dialog显示隐藏时，dialog位置会发生变化，所以 不要像上面代码这样直接用根目录，最好将该目录下的某一层设为display:none