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

时间:2024-03-07 12:45:43

最近做了一个公司网站,由于没有后端,只能先写静态页面,新闻内容来源于公众号文章,文章实在是太多了,而且排版内容通过人工复制也工作量巨大,于是想通过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\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";
                //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);

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