iframe引入微信公众号文章

微信在文章页面设置了响应头““frame-ancestors ‘self’”阻止了外部页面将其嵌套的行为，文章的图片也设置了防盗链的功能，这就导致了直接在iframe中引用微信公众号文章会报错。

 

 

解决办法

既然是域名的原因导致的问题，就那想办法用我们自己的域名。
思路就是通过file_get_contents获取微信公众号文章的html内容，将其中所有的data-src替换为src（文章图片的url设置在data-src中），然后将所有图片的URL拼接成一个本地域名下的一个地址，文章加载图片的时候，再通过file_get_contents获取图片的内容，返回给前端。后端也可以以富文本编辑器内容的形式返回给前端，这样可能就不需要使用iframe嵌套页面了。这样就能完整的加载微信公众号的文章了，如果设置了CND回源，加载会更快。

 

 

上代码:

　　

<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);
            // });

 

 

没问题了,  但是 不支持  微信文章里面的视频播放,  视频这块有问题,   有方法的大神 可以联系在下!!!

 

参考文章: https://blog.csdn.net/weixin_41257563/article/details/84672041

　　　　　　https://blog.csdn.net/yangdl6/article/details/107634212?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control