将微信公众号的文章通过iframe嵌入网页

Posted 2020-12-24 clover54

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

<iframe id="iFrame" width="100%"></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[^<]*(?:(?!</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";
                //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);

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