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