最近在做一个案例页面，主要结构就是列表和内容，还有固定的头部和底部（方便查看价格及购买），因为之前的案例详情页是很多的固定页面，这样不太方便维护，现在其他同事需要展示不同的案例，所以就从新整理了一下这块：
1、列表页就是很普通的，请求数据，包含一张图片、一句简要说明、一个微信文章链接，图片和文字展示在列表页，链接是当点击图片是跳转（就是div显示隐藏）显示对应的文章；
2、详情页就是将点击的链接赋值给iframe的src，但是这里问题还是比较多的：
微信公众号文章的图片做了处理，在外域使用的话，图片是显示不出来的，所以在给iframe赋值链接的时候是需要做些处理的，从网上查找资料，使用的是基于jquery的一个方法：
$.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 showSrc = 微信文章地址
$.get( showSrc, function (response){
var html = response;
html = html.replace(/data-src/g, "src").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, ‘‘).replace(/https/g,‘http‘);
var html_src = ‘data:text/html;charset=utf-8,‘ + html;
iframe.attr("src" , html_src);
//var bodyInner = thisV.getBody(html,REG_BODY);
//bodyInner = ‘<div class="bodyHtml">‘+bodyInner +‘</div>‘
//$(‘.casesCon‘).append(bodyInner);
});
上面$.ajaxPrefilter函数是指定预先处理ajax参数选项的回调函数， 在所有参数选项被ajax函数处理之前，可以使用该函数设置的回调函数来预先更改任何参数选项。 还可以指定数据类型（dataType），从而只预先处理指定数据类型的参数选项。 该函数可以调用多次，以便为不同数据类型的ajax请求指定不同的回调函数。 该函数属于全局jQuery对象。 用法：jQuery.ajaxPrefilter([ dataType ] , handler) dataType（string）：可用的数据类型为：xml、html、text、json、jsonp、script，一个或多个数据类型，使用空格隔开："xml json html"； handler（Function）：可有3个参数options、originalOptions、jqXHR; 具体可查看 http://www.css88.com/jqapi-1.9/jQuery.ajaxPrefilter/ 在我的这个项目里，就是将下面get请求的地址重新处理了一下，在请求地址修改为：http://cors-anywhere.herokuapp.com/微信文章地址， http://cors-anywhere.herokuapp.com这个网址是一个处理跨域请求的地址，以我这个项目简单说明一下，就是将我需要的微信文章地址，转换成HTML代码返回，也就是下面get函数中response。 那么，下面的$.get函数，虽然请求的是微信文章的地址，但实际请求到的是这篇文章的HTML，微信文章的图片地址都是data-src，所以正则替换成src 下面，需要将这些代码在做一下处理，赋值给iframe的src中，让图片可以在跨域的情况下也能正常显示，就是在我们得到的HTML前面添加 ‘data:type/html;charset=utf-8,‘ 这句话添加到URL前面，浏览器就会将后面的东西当作html代码解析，so～ 实际给iframe的src赋的值是 ‘data:type/html;charset=utf-8,‘ + response,这样浏览器在解析这些代码的时候就避开了跨域问题（具体可能由cors-anywhere），此时，在浏览器中就可以正常显示了。BUT～ 项目需要在微信中使用，当我们在微信中打开这个iframe的时候，很荣幸的死掉了...这个死掉的原因是因为微信中，iframe的src不支持data的写法，可能是微信做了处理吧，那就换个思路吧，苦思冥想～ 既然已经把HTML代码都请求过来了，那我们在微信中就不用iframe，直接把内容和样式append进去，（在这之前，我把js都去掉了，因为存在跨域问题，浏览器老报错。）， 替换以后（就是上面注释的部分）可以用（当然是在上到我们测试环境，然后在微信中打开），大部分图片都可以正常显示，然后向我们领导询问，这个可能还是由一些跨域的问题，正好有一张图片，每篇文章都有，但有的可以显示，有的就不能，经过仔细对比， 发现图片请求是https的时候，图片显示不出来，http的时候，图片就能显示（但把地址复制到浏览器地址栏，http开头的请求就会变成https了，这块不是很懂，希望有看到的朋友，如果懂的话，留言讲解一下，感谢～）， 用这种方法在浏览器中查看，就会显示微信那个默认图片，显示不正常，所以就判断在浏览器的时候，就用iframe，在微信中就用appendDOM节点的方式，到此，在微信中、浏览器中均能正常显示。又要BUT了～ 我们需要在app中也要打开，使用iframe的方式，挂掉了，使用append的方式，可以显示，但图片又变成了微信默认图... 有遇到相似问题的同学，欢迎留言评论～