關於微信公衆號圖片防盜鏈問題的解決辦法

對於網頁裏引用微信公衆號圖片時出現的"此圖片來自微信公衆平臺, 未經容許不可引用"的問題, 能搜索到的解決方案很少, 除去已經被和諧掉的, 大概能夠分爲兩種:

第一種, 更改圖片src, 例如

options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

　　但這種加跳板的方式受制於跳板的狀態, 若是cores-anywhere.herokuapp.com中止服務了, 那麼圖片仍是不能顯示出來. 因此這種方法不予考慮.

第二種, 嵌套iframe

　　這裏參考了http://www.javashuo.com/article/p-neazsssn-kc.html 的解決方案, 可是這種方案並不能解決網頁裏有多張圖片的狀況, 會致使只有最後一張圖片能正常顯示. 

　　不過既然第一步已經成功了, 後面就簡單多了. 

　　研究一下代碼, 發現他給父頁面window賦予了一個img屬性, 而後把這個img顯示進全部iframe裏, 那我給每張圖片都賦予一個不一樣的屬性不就好了?

　　

$(function () {
            $(".xiangxi img").each(function (index, element) {
                var img = $(this);
                var img_src = img.attr("src");
                if (img_src.indexOf("wxfrom") != -1) {
                    var frameid = 'frameimg' + Math.random();
                    var atr = "wximg" + frameid;
                    var imgcode = '<img id="' + atr + '" src=\'' + img_src + '?' + Math.random() + '\' /><script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'' + atr + '\').height+\'px\'; }<' + '/script>';
                    window.attr(atr, imgcode);
                    img.parent().append('<iframe id="' + frameid + '" src="javascript:parent.' + atr + ';" frameBorder="0" scrolling="no" width="100%"></iframe>');
                    img.remove();
                }
            });
        })

　　Ok, 解決!