用iframe嵌入了一个微信公众号平台文章的URL

JS:

$.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 link = "微信公众号平台链接";
$.get(
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);
}
);

body: <iframe width="750" height="500" src=""></iframe>

原理:cors-anywhere.herokuapp.com是一个服务端API,可以将跨域的原始请求发送到任何地方,我们通过这个方法可以获取跨域页面的HTML内容,并拼成string,用$.get方法返回这个string , 我们匹配里面所有的date-src并替换成src,然后把处理完的string放到iframe的src里,在浏览器解析的时候会自动将src内的内容解析成HTML页面

//备注:如果微信公众号里有视频目前还在研究显示方案,图片和文字均可显示,如果有解决视频显示问题的小伙伴欢迎留言~

转载于:https://www.cnblogs.com/lj8023/p/9449117.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值