需求
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