摘要：于是关键词求助百度，给出的答案要不说是的问题，要不是说客户端的问题，都尝试了一下，发现一点用处都没有。但是仍然有点奇怪，也是使用，后来回忆，在换百度这个链接之前杀了一次进程，应该是这个因素导致的。
写在前面
最近接手了一个古旧的项目，跟客户端、服务器端一起调一个支付相关的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，报错信息来的太是时候了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106853.html
摘要：公司有个需求就是要在前端生成图片首先想到的是用生成图片，自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单，官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会 公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片，自己画这也太耗时间了吧！后面在npm上一查有个html2canvas的框架可以用...
摘要：公司有个需求就是要在前端生成图片首先想到的是用生成图片，自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单，官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会 公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片，自己画这也太耗时间了吧！后面在npm上一查有个html2canvas的框架可以用...
摘要：公司有个需求就是要在前端生成图片首先想到的是用生成图片，自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单，官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会 公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片，自己画这也太耗时间了吧！后面在npm上一查有个html2canvas的框架可以用...
摘要：如果在内嵌页面未载入完成时，给出一种加载提示信息。载入区域给出友好的提示信息当载入完成时，清空提示信息，而让显示这些都比较容易，但现在的问题的关键是怎么监听元素内的页面已经载入完成。 经常会遇到这样一种情景： 在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到iframe里的页面的响应很慢，这里会出现...
阅读 3629·2021-10-11 10:58
阅读 2230·2021-10-08 10:05
阅读 1909·2021-09-27 13:34
阅读 3522·2019-08-30 15:53
阅读 2707·2019-08-30 14:02
阅读 3514·2019-08-29 16:55
阅读 599·2019-08-29 15:41
阅读 1030·2019-08-29 15:23
