码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-06-03 10:39:03      阅读:522      评论:0      收藏:0      [点我收藏+]

标签:let   tag   set   链接   console   name   排版   window   utf-8   

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

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

 

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

标签:let   tag   set   链接   console   name   排版   window   utf-8   

原文地址:https://www.cnblogs.com/clover54/p/13035903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!