解决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里打开有效，微信内置浏览器内打开会导致微信崩溃

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

解决URLToPDF 微信公众号文章图片不显示问题(全网唯一方案)
文章目录有几种物理方法可以将URL(网页地址)转换成PDF文件: Python 代码实现: Java 实现方式: java 调用 wkhtmltopdf 实现URLToPDF(基础版) java ...
iframe嵌套微信公众号文章
<iframe style="min-height:100vh;width:100%;border-width: 0;" id="iFrame" widt ...
iframe引入微信公众号文章
微信在文章页面设置了响应头""frame-ancestors 'self'"阻止了外部页面将其嵌套的行为,文章的图片也设置了防盗链的功能,这就导致了直接在iframe中引 ...
iframe 绕过微信公众号文章防盗检测
多说无益贴一段使用的代码 getUrl(URL){ //url 为微信公众号文章链接let http = (window.location.protocol === 'http:' ? 'http: ...
pc端引入微信公众号文章
最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的"投票"按钮, ...
记一次企业级爬虫系统升级改造（四）：爬取微信公众号文章（通过搜狗与新榜等第三方平台）
首先表示抱歉,年底大家都懂的,又涉及SupportYun系统V1.0上线.故而第四篇文章来的有点晚了些~~~对关注的朋友说声sorry! SupportYun系统当前一览: 首先说一下,文章的进度一直 ...
记一次企业级爬虫系统升级改造（四）：爬取微信公众号文章（通过搜狗与新榜等第三方平台）...
首先表示抱歉,年底大家都懂的,又涉及SupportYun系统V1.0上线.故而第四篇文章来的有点晚了些~~~对关注的朋友说声sorry! SupportYun系统当前一览: 首先说一下,文章的进度一直 ...
python爬取正确但不出文件_使用Python爬取微信公众号文章并保存为PDF文件(解决图片不显示的问题)...
前言第一次写博客,主要内容是爬取微信公众号的文章,将文章以PDF格式保存在本地. 爬取微信公众号文章(使用wechatsogou) 1.安装 pip install wechatsogou --up ...
iframe显示微信公众号文章
最近在做一个案例页面,主要结构就是列表和内容,还有固定的头部和底部(方便查看价格及购买),因为之前的案例详情页是很多的固定页面,这样不太方便维护,现在其他同事需要展示不同的案例,所以就从新整理了一下这 ...
嵌套页面h5怎么调起手机文件_让微信公众号文章排版像网页h5一样高大上
做过微信公众号文章排版的同学都知道,微信自己的排版工具只能排些简单的图文混合.遇到这种同况时,很多同学会考虑用第三方编辑器或直接用他们的模板,然后稍微改改便直接发布. 没有我想要的排版样式怎么办,可以 ...

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

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

最新文章

热门文章