iframe显示微信公众号文章

Posted 博客-崔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe显示微信公众号文章相关的知识,希望对你有一定的参考价值。

最近在做一个案例页面,主要结构就是列表和内容,还有固定的头部和底部(方便查看价格及购买),因为之前的案例详情页是很多的固定页面,这样不太方便维护,现在其他同事需要展示不同的案例,所以就从新整理了一下这块:

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的方式,可以显示,但图片又变成了微信默认图...
  有遇到相似问题的同学,欢迎留言评论~


































以上是关于iframe显示微信公众号文章的主要内容,如果未能解决你的问题,请参考以下文章

将微信公众号的文章通过iframe嵌入网页

将微信公众号的文章通过iframe嵌入网页

微信jssdk可以在iframe生效吗

iframe框架嵌入一个网页,在微信里面打开不显示内容,一片空白,在其他浏览器都正常,紧急求助,在线等!

iframe嵌套页面 音频在微信公众号环境无法播放

如何将微信公众号文章里面的图片批量导出