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

對於網頁里引用微信公眾號圖片時出現的"此圖片來自微信公眾平台, 未經允許不可引用"的問題, 能搜索到的解決方案不多, 除去已經被和諧掉的, 大概可以分為兩種:

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

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

　　但這種加跳板的方式受制於跳板的狀態, 如果cores-anywhere.herokuapp.com停止服務了, 那么圖片還是不能顯示出來. 所以這種方法不予考慮.

第二種, 嵌套iframe

　　這里參考了https://www.cnblogs.com/ixysy/p/4983891.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, 解決!