解决iframe嵌套微信公众号文章图片不显示的方案

微信公众号分享出来的文章有自带防盗功能 , 所有的初始img链接都是写在date-src属性中,当链接打开时会自动判断当前页面是不是在最上层地址,当在最上层地址打开的时候才会把date-src替换成src,图片才能正常显示
我们可以绕过iframe的解析过程来实现渲染图片:

$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
};
});

var share_link="http://mp.weixin.qq.com/####";    这里是微信文章地址

$.get( share_link, function (response){
var html = response;
html=html.replace(/data-src/g, "src");
var html_src = 'data:text/html;charset=utf-8,' + html;
$("#iframeId").attr("src" , html_src);
});

原理:

cors-anywhere.herokuapp.com是一个服务端API,可以将跨域的原始请求发送到任何地方,我么通过这个方法可以获取跨域页面的HTML内容,并拼成string,用$.get方法返回这个string , 我们匹配里面所有的date-src并替换成src,然后把处理完的string放到iframe的src里,在浏览器解析的时候会自动将src内的内容解析成HTML页面

注:在把处理完成的string放到iframe的src里时,一定要在前面拼上解析码'data:text/html;charset=utf-8,'否则中文会出现乱码

此方法渲染的页面只能在微信除外的第三方浏览器或者APP webview里打开有效，微信内置浏览器内打开会导致微信崩溃