最近做了一个公司网站，由于没有后端，只能先写静态页面，新闻内容来源于公众号文章，文章实在是太多了，而且排版内容通过人工复制也工作量巨大，于是想通过iframe嵌入来实现展示。

在新闻文章页面插入html和js就可以了。

function getUrl(URL) {

let http = (window.location.protocol === 'http:' ? 'http:' : 'https:');

//调用跨域API

let realurl = http + '//cors-anywhere.herokuapp.com/' + URL;

axios.get(realurl).then((response) => {

// console.log(response)

let html = response.data;

html = html.replace(/data-src/g, "src")

.replace(/)<[^<]*)*<\/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";

//var doc = iframe.contentDocument || iframe.document;

//doc.body.innerHTML = html_src;

//iframe.document.getElementsByTagName('body').innerHTML = html_src;

}, (err) => {

console.log(err);

});

}

//调用getUrl方法，url为微信公众号文章链接

var url = "https://mp.weixin.qq.com/s/K1UR1mXAHIZXfC_Pts_1CA";

getUrl(url);

通过这个方法，页面当中可以显示文章了，图片却还是不显示。再研究研究吧。。。