iframe嵌套微信公众号文章

32 篇文章 0 订阅
<iframe  style="min-height:100vh;width:100%;border-width: 0;"  id="iFrame" width="100%"></iframe>
function getUrl(URL) {
                let http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
                //调用跨域API
                let realurl = http + '//cors-anywhere.herokuapp.com/' + URL;
                $.ajax({
                    type: 'get',
                    url: realurl,
                    success: function (response) {
                        if (response) {
                            let html = response;
                    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";
                        }
                    },
                    error: function (err) {
                        console.log(err);
                        alert('好像出错了...');
                        
                    }
                });
                
            }
            //调用getUrl方法,url为微信公众号文章链接
            var url = "https://mp.weixin.qq.com/s/m6DZ4mPkPfpmLnUC9upO1A";
            getUrl(url);





 // // 方法二
            // $.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 share_link = "https://mp.weixin.qq.com/s/m6DZ4mPkPfpmLnUC9upO1A";    //这里是微信文章地址

            // $.get( share_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);
            // });

注意:这两种方案都只能将文字回显出来,但是图片还是不能显示。暂时还没找到解决方案

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值