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，报错信息来的太是时候了。