ios下iframe内的加载更多为什么失效了？

最近做一个页面遇到ios下拉加载的功能失效的问题。查看页面后发现该页面是用iframe引的一个wap页，由于手机上不好测试，在经过n次alert后排查了原因。

1.ios页面下拉的时候iframe的scroll事件未触发。

被iframe的子页面中，下拉加载是用scroll写的判断是否下拉到底部scrollTop>=$(document).height()-$(window).height()如果加载到底部则加载更多，而当在ios下滑动父级页面时子页面的scroll事件却没有触发，为什么呢？经过给iframe加border发现，原来ios下给iframe设置高度是无效的，iframe的高度就是内部文档的高度。也就是子元素的window的高度等于iframe的高度，等于子页面文档的高度，所以不会出现滚动条，滚动事件也就触发不了。
解决方法：改用touchend事件。
改用touchend后，安卓和ios都能触发了，但是ios下的scrollTop一直是0，不过刚好$(document).height()-$(window).height()也是等于0，所以满足加载更多的条件。但是有点瑕疵，就是判断是否下拉到底部的功能失效了，也是就是一滑动iframe，就会加载更多。

2.touchend事件

本以为改成了touchend后事情就解决了，但是却发现安卓一些低版本的浏览器对touchend的触发很不稳定，（如手机百度，qq）。
解决方法：由于安卓下对iframe设定高度是生效的，所以scroll的事件触发的却很稳定。在事件前做出判定，安卓下绑定scroll事件，ios下绑定touchend事件。

判断手机系统的代码如下：

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android：'+isAndroid);

alert('是否是iOS：'+isiOS);

3.iframe的高度问题

虽然安卓触发scroll事件，但是有些低版本的浏览器虽然加载了更多还是往下拉不动。
解决方法：设置iframe的overlow-y：auto，另外子页面的图片最好设置高度，否则，图片如果加载失败，可能会导致判断加载的条件不满足。最终结果：除了我本机的安卓原生浏览器外，其余浏览器皆正常，由于用其他安卓机出现问题，本机的结果不作为bug处理了。

很早就听说iframe的问题多，不建议使用iframe，这次还真遇到了，为了避免在遇到坑，今后得尽量少用iframe了，由于验证手机数量不多，结论也许不够准确，仅作为参考。