iframe onload事件被block的巨坑

寫在前面

最近接手了一個古舊的項目，跟客戶端、服務器端一塊兒調一個支付相關的app內嵌H5頁面，這個頁面有兩部分組成，主頁面A加上一個最終支付頁面B，B頁面是經過iframe嵌入到A頁面中的，A、B兩個頁面之間的交互採用postMessage+hashChange。
通常除了下載之類的需求，我不多在本身的項目中使用iframe，像這樣的兩個頁面切換的問題，第一反應都是分開寫的，不會使用iframe套在一塊兒。
由於項目代碼比較老了，我也不太敢動，主要仍是在上面修修補補，基本邏輯理通以後，我在本身的安卓測試機上調試了一番，一路通順，徹底沒有問題。我把訪問連接給到客戶端，讓他試一下，客戶端反映，B頁面出不來。
但是在我手機上明明是好的啊，怎麼忽然顯示不出來了呢。

嘗試方法

第一反應，有的手機能夠，有的手機不行，是否是代碼哪裏有兼容性問題。
我用有問題的手機打開線上的支付頁面，發現沒有任何問題，兩個支付頁面是共用代碼的，排除了兼容性問題，必定是在代碼上出了錯。
然而當時我基本上沒在原有的代碼上加什麼功能性代碼，一時也理不出頭緒。
在代碼里加調試工具，看見有幾個js的ajax網絡請求一直pending，長時間pending以後就failed了，這個卻是好解決，反正是靜態資源，我直接放在頁面裏面，或者script標籤引入就好了，照作以後，以前有問題的js卻是引入進來了，接着又發現iframe的onload也沒有執行，但是調試工具上沒有報錯。
我對iframe是至關抵觸的，平時也沒有花時間去好好了解一下它，它的onload沒法執行，當下我是一點想法都沒有的。
因而關鍵詞求助百度，給出的答案要不說是css的問題，要不是說客戶端webview的問題，都嘗試了一下，發現一點用處都沒有。
我把iframe的src換成了http://www.baidu.com，能夠加載。
再換回去咱們的連接，仍是不行，將app殺個進程，再進去訪問，忽然就能夠了，不一樣安卓版本的手機嘗試了一下，也沒發現這個現象跟安卓高低版本之間有什麼必然的關係，甚至部分手機有時候能夠加載，有時候又不能夠。
徹底無規律。

解決

以前我都是在客戶端webview裏面加調試工具看的，我忽然想起，調試工具提供的信息有限，不如試一下在chrome中訪問看一下。
chrome裏面依然顯示iframe的onload沒有執行，可是這時候終於出現了一行報錯，顯示「Mixed Content……This request has been blocked; the content must be served over HTTPS」。
原來https和http混用，http請求會被block掉，我回頭看了一下，我訪問A頁面的時候是使用的https協議，可是B頁面的iframe使用的是http協議，因此被瀏覽器直接block掉了，致使onload沒法執行。
我再將線上那個能夠運行的支付頁面的連接拿來一看，人家使用的是http協議！
個人天爺，坑原來在這裏等着我，我萬萬沒想到，一個https居然引發了這麼大的麻煩。不止這個iframe，那幾個經過ajax請求的js也是一樣的問題，都是由於使用的是http，因此被block掉了。
緣由找到，迅速解決，在客戶端的手機上終於順利展現。
可是仍然有點奇怪，http://www.baidu.com也是使用...，後來回憶，在換百度這個連接以前殺了一次進程，應該是這個因素致使的。

總結

1.我以前很喜歡混用https和http，沒什麼具體的依據，想到https就使用https，想到http就用http（由於咱們的資源兩種協議都支持），這一不留意就給本身挖了個巨坑。
2.iframe + postMessage很好的解決了兩個頁面傳值的問題，能夠不借助後端(這樣就少了幾個後端接口，且也少了中途被劫持篡改的風險)，直接跨域傳遞，這個特性在本次頁面中發揮了很大的做用，很是好用。
3.我之後再也不再排斥iframe了，它的做用大大的。
4.讚美chrome，報錯信息來的太是時候了。