微信在文章页面设置了响应头““frame-ancestors ‘self’”阻止了外部页面将其嵌套的行为,文章的图片也设置了防盗链的功能,这就导致了直接在iframe中引用微信公众号文章会报错。

解决办法

既然是域名的原因导致的问题,就那想办法用我们自己的域名。
思路就是通过file_get_contents获取微信公众号文章的html内容,将其中所有的data-src替换为src(文章图片的url设置在data-src中),然后将所有图片的URL拼接成一个本地域名下的一个地址,文章加载图片的时候,再通过file_get_contents获取图片的内容,返回给前端。后端也可以以富文本编辑器内容的形式返回给前端,这样可能就不需要使用iframe嵌套页面了。这样就能完整的加载微信公众号的文章了,如果设置了CND回源,加载会更快。

上代码:

  

<iframe  style="min-height:100vh;width:100%;border-width: 0;"  id="iFrame" width="100%"></iframe>
function getUrl(URL) {
let http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
//调用跨域API
let realurl = http + '//cors-anywhere.herokuapp.com/' + URL;
$.ajax({
type: 'get',
url: realurl,
success: function (response) {
if (response) {
let html = response;
html = html.replace(/data-src/g, "src")
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
.replace(/https/g, 'http');
// let html_src = 'data:text/html;charset=utf-8,' + html;
let html_src = html;
let iframe = document.getElementById('iFrame');
iframe.src = html_src;
var doc = iframe.contentDocument || iframe.document;
doc.write(html_src);
doc.getElementById("js_content").style.visibility = "visible";
}
},
error: function (err) {
console.log(err);
alert('好像出错了...'); }
}); }
//调用getUrl方法,url为微信公众号文章链接
var url = "https://mp.weixin.qq.com/s/m6DZ4mPkPfpmLnUC9upO1A";
getUrl(url); // // 方法二
// $.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 = "https://mp.weixin.qq.com/s/m6DZ4mPkPfpmLnUC9upO1A";    //这里是微信文章地址 // $.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;
// $("#iFrame").attr("src" , html_src);
// });

没问题了,  但是 不支持  微信文章里面的视频播放,  视频这块有问题,   有方法的大神 可以联系在下!!!

参考文章: https://blog.csdn.net/weixin_41257563/article/details/84672041

      https://blog.csdn.net/yangdl6/article/details/107634212?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control

iframe引入微信公众号文章的更多相关文章

  1. pc端引入微信公众号文章

    最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的“投票”按钮,在当前页面弹出弹窗显 ...

  2. Chrome浏览器保存微信公众号文章中的图片

    用chrome浏览器打开微信公众号文章中时,另存为图片时保存的是640.webp,不是图片本身,用IE则没有此问题.大部分chrome插件也无法保存图片. 经过多番尝试,找到一款插件可以批量保存微信公 ...

  3. 使用Python爬取微信公众号文章并保存为PDF文件(解决图片不显示的问题)

    前言 第一次写博客,主要内容是爬取微信公众号的文章,将文章以PDF格式保存在本地. 爬取微信公众号文章(使用wechatsogou) 1.安装 pip install wechatsogou --up ...

  4. 【技巧】如何使用客户端发布BLOG+如何快速发布微信公众号文章

    [技巧]如何使用客户端发布BLOG+如何快速发布微信公众号文章   1  BLOG文档结构图     2  前言部分   2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也 ...

  5. 制作的excel表格如何放到微信公众号文章中?

    制作的excel表格如何放到微信公众号文章中? 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件 ...

  6. Python 微信公众号文章爬取

    一.思路 我们通过网页版的微信公众平台的图文消息中的超链接获取到我们需要的接口 从接口中我们可以得到对应的微信公众号和对应的所有微信公众号文章. 二.接口分析 获取微信公众号的接口: https:// ...

  7. 用Markdown写微信公众号文章

    目前微信公众号的编辑器是不支持Markdown语法的,那怎么办呢? 有一款叫Markdown Here的插件可以解决这个问题(支持Chrome.Firefox.Safari). 官方网站:http:/ ...

  8. 破解微信防盗链&微信公众号文章爬取方案

    破解微信图文防盗链:https://www.cnblogs.com/xsxshmily/p/8000043.html 图片解除防盗链:https://blog.csdn.net/show_ljw/ar ...

  9. 微信公众号文章转语音tts

    微信公众号里面的文章在走路或者开车时候不方便浏览,希望能增加一个文字转语音功能,那么问题来了,到底哪家文字转语音技术强呢? 经过验证,目前发现最好用的还是balabolka ,国内的什么“录音啦”,试 ...

随机推荐

  1. springboot----二、Hello,SpringBoot!

    二.Hello,SpringBoot! 2.1.环境搭建 java version 1.8 maven springboot 最新版 开发工具:idea 2.2.创建基础项目说明 Spring官方提供 ...

  2. 网络标准之:IANA定义的传输编码

    目录 简介 IANA的传输编码方式 7bit 8bit binary quoted-printable base64 总结 简介 不同的系统或者协议可以接受的数据类型是不同的,如果要在那些不支持现有数 ...

  3. 自定义 Django admin 组件

    摘要:学习 Django admin 组件,仿照源码的逻辑,自定义了一个简易的 stark 组件,实现类似 admin 的功能. 可自动生成 url 路由,对于model 有与之相应的配置类对象,可进 ...

  4. spinlock 设计的初衷,当只有单核时是否还需要锁

    自旋锁,的设计初衷是什么,是为了解决什么问题.如果只有一个cpu,并且是单核,那是否还需要用到自旋锁.

  5. CVE-2017-12635(Couchdb垂直权限绕过漏洞)

    简介 Apache CouchDB是一个开源数据库,专注于易用性和成为"完全拥抱web的数据库".它是一个使用JSON作为存储格式,JavaScript作为查询语言,MapRedu ...

  6. Cobalt Strike的安装

    一.下载 压缩包下载回来之后,可以看到里面的文件有这些: 其中搭建团队服务器端的关键文件有两个,一个是cobaltstrike.jar,另一个是teamserver,这里我打算将团队服务器端搭在我的v ...

  7. WebGL 的 Hello World

    本文整理自 div 侠于 凹凸 2022 年技术分享,简单介绍了 WebGL 画一个基础图形的流程,希望你了解之后,在使用 3d 渲染库的时候可以少点迷糊. 四种常用的页面绘图工具 关于h5页面的图形 ...

  8. Java study 4

    JAVA 学习第四天 今日学习内容 快捷键.复习.注释.字面量 快捷键 学习地址:IJ快捷键 复习 jdk下载.安装.部署环境.第一个Java程序入门学习,环境变量path 注释 注释:顾名思义就是用 ...

  9. [WPF] 假装可变字体

    1. 可变字体 上图中的两个动画,一个文字直接变粗,一个渐渐变粗,我觉得后者会更有趣.但普通的字体可达不到这种效果,例如微软雅黑,无论怎么调整它的 FontWeight,实际上它也只有三种粗细: 这时 ...

  10. python 字典dict 增删改查操作

    初始化: a. data_dict = {} b. data_dict1 = dict() c. data_dict2 = {'key':'value'} 新增: a. data_dict[key]= ...