共计 1653 个字符，预计需要花费 5 分钟才能阅读完成。
写在前面
最近接手了一个古旧的项目，跟客户端、服务器端一起调一个支付相关的 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，报错信息来的太是时候了。
