百度分享 去掉微信二维码分享下的文字提示
需求
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; width: 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; width: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
