iframe ajax事件被跳过,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，报错信息来的太是时候了。

作者：羊羊羊