iframe嵌套微信网页，图片无法显示问题

最新推荐文章于 2023-08-03 18:40:39 发布

weixin_30381317

最新推荐文章于 2023-08-03 18:40:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：人工智能 javascript ViewUI

原文链接：http://www.cnblogs.com/ninestart/p/6586438.html

本文介绍了一种通过修改data-src属性并使用iframe显示微信文章内容的方法。利用jQuery和跨域请求，可以实现在非微信环境中预览微信公众号的文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致步骤分为两步：
1.跨域获取微信html内容,替换data-src为src
  参考：http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax
  引用：https://github.com/Rob--W/cors-anywhere/
2.通过data src注入iframe:$("iframe").attr("src" , wx_html_content);
   参考：http://www.tuicool.com/articles/emy2Qjy
 
代码如下：
$.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;
       //options.url = "http://cors.corsproxy.io/url=" + options.url;
    }
});
                     
 var share_link="http://mp.weixin.qq.com/s?__biz=MjM5MTQzNzU2NA==&mid=2651645171&idx=1&sn=be00a69de9072abd9d107c7f8f5b9206&chksm=bd4dc3608a3a4a76f423d78c10c978099ac67a98baaa6047017ed42c49d614219491f33ee4d7&scene=0#rd";//微信文章地址
$.get(
      share_link,
      function (response) {
      console.log("> ", response); 
      var html = response;
      html=html.replace(/data-src/g, "src"); 
      var html_src = 'data:text/html;charset=utf-8,' + html;
      $("iframe").attr("src" , html_src);
});
 
亲测有效 