最近在做一個案例頁面，主要結構就是列表和內容，還有固定的頭部和底部（方便查看價格及購買），因為之前的案例詳情頁是很多的固定頁面，這樣不太方便維護，現在其他同事需要展示不同的案例，所以就從新整理了一下這塊：

1、列表頁就是很普通的，請求數據，包含一張圖片、一句簡要說明、一個微信文章鏈接，圖片和文字展示在列表頁，鏈接是當點擊圖片是跳轉（就是div顯示隱藏）顯示對應的文章；

2、詳情頁就是將點擊的鏈接賦值給iframe的src，但是這裏問題還是比較多的：

　　微信公眾號文章的圖片做了處理，在外域使用的話，圖片是顯示不出來的，所以在給iframe賦值鏈接的時候是需要做些處理的，從網上查找資料，使用的是基於jquery的一個方法：　

　　　　$.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 showSrc = 微信文章地址
 

　　　　　$.get( showSrc, function (response){
　　　　 　　　 var html = response;
　　　　　　　　html = html.replace(/data-src/g, "src").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, ‘‘).replace(/https/g,‘http‘);

　　　　　　　　var html_src = ‘data:text/html;charset=utf-8,‘ + html;

　　　　　　　　iframe.attr("src" , html_src);

　　　　　　　　//var bodyInner = thisV.getBody(html,REG_BODY);
　　　　 　　　 //bodyInner = ‘<div class="bodyHtml">‘+bodyInner +‘</div>‘
　　　　　　　　//$(‘.casesCon‘).append(bodyInner);
　　　　});

　　上面$.ajaxPrefilter函數是指定預先處理ajax參數選項的回調函數，
　　在所有參數選項被ajax函數處理之前，可以使用該函數設置的回調函數來預先更改任何參數選項。
　　還可以指定數據類型（dataType），從而只預先處理指定數據類型的參數選項。
　　該函數可以調用多次，以便為不同數據類型的ajax請求指定不同的回調函數。
　　該函數屬於全局jQuery對象。
　　用法：jQuery.ajaxPrefilter([ dataType ] , handler)
　　dataType（string）：可用的數據類型為：xml、html、text、json、jsonp、script，一個或多個數據類型，使用空格隔開："xml json html"；
　　handler（Function）：可有3個參數options、originalOptions、jqXHR;
　　具體可查看 http://www.css88.com/jqapi-1.9/jQuery.ajaxPrefilter/ 
　　在我的這個項目裏，就是將下面get請求的地址重新處理了一下，在請求地址修改為：http://cors-anywhere.herokuapp.com/微信文章地址，
　　http://cors-anywhere.herokuapp.com這個網址是一個處理跨域請求的地址，以我這個項目簡單說明一下，就是將我需要的微信文章地址，轉換成HTML代碼返回，也就是下面get函數中response。
　　那麽，下面的$.get函數，雖然請求的是微信文章的地址，但實際請求到的是這篇文章的HTML，微信文章的圖片地址都是data-src，所以正則替換成src
　　下面，需要將這些代碼在做一下處理，賦值給iframe的src中，讓圖片可以在跨域的情況下也能正常顯示，就是在我們得到的HTML前面添加 ‘data:type/html;charset=utf-8,‘ 這句話添加到URL前面，瀏覽器就會將後面的東西當作html代碼解析，so～
　　實際給iframe的src賦的值是 ‘data:type/html;charset=utf-8,‘ + response,這樣瀏覽器在解析這些代碼的時候就避開了跨域問題（具體可能由cors-anywhere），此時，在瀏覽器中就可以正常顯示了。BUT～
　　項目需要在微信中使用，當我們在微信中打開這個iframe的時候，很榮幸的死掉了...這個死掉的原因是因為微信中，iframe的src不支持data的寫法，可能是微信做了處理吧，那就換個思路吧，苦思冥想～
　　既然已經把HTML代碼都請求過來了，那我們在微信中就不用iframe，直接把內容和樣式append進去，（在這之前，我把js都去掉了，因為存在跨域問題，瀏覽器老報錯。），
　　替換以後（就是上面註釋的部分）可以用（當然是在上到我們測試環境，然後在微信中打開），大部分圖片都可以正常顯示，然後向我們領導詢問，這個可能還是由一些跨域的問題，正好有一張圖片，每篇文章都有，但有的可以顯示，有的就不能，經過仔細對比，
　　發現圖片請求是https的時候，圖片顯示不出來，http的時候，圖片就能顯示（但把地址復制到瀏覽器地址欄，http開頭的請求就會變成https了，這塊不是很懂，希望有看到的朋友，如果懂的話，留言講解一下，感謝～），
　　用這種方法在瀏覽器中查看，就會顯示微信那個默認圖片，顯示不正常，所以就判斷在瀏覽器的時候，就用iframe，在微信中就用appendDOM節點的方式，到此，在微信中、瀏覽器中均能正常顯示。又要BUT了～
　　我們需要在app中也要打開，使用iframe的方式，掛掉了，使用append的方式，可以顯示，但圖片又變成了微信默認圖...
　　有遇到相似問題的同學，歡迎留言評論～

iframe顯示微信公眾號文章