在IOS中嵌套H5页面发生空白的问题

问题描述

如下业务场景，在IOS应用中，嵌入了H5页面，就叫他A页面，点击A页面跳转至B页面，B页面有一个按钮，叫他按钮S，按钮S会触发一个Ajax事件，去请求一个应用接口，返回一个HTML，返回的HTML就定义为h变量名吧,Ajax调用("body").html(h)；h的内容是，一个form，在设置了$("body").html(h)；h的内容是，一个form，在设置了$(“body”).html(h)之后，调用了h中的form的submit方法,假设h中的form的id为fid，js执行$(“#fid”).submit(),此时会跳转至form指定的action地址，ok，那么现在，在IOS设备中，我点击了，原生应用的返回按钮，而不是页面的后退按钮（此时其实屏幕上有两个后退按钮），那么在IOS中会出现返回是空白页，在安卓设备中不会。

问题查找

后来找IOS开发，各种看，都找不到原因，冥冥中就是被残虐，一个开发妹子后来看了代码，解释道：在调用("body").html(h),会清空整个页面，整个时候页面会有一个空白期，等到Ajax返回数据之后，再设置到HTML中，此时的HTML已经跳转至form中请求的新页面，点击IOS原生view的后退按钮，就看到了空白，事实上看到的是$("body").html(h),会清空整个页面，整个时候页面会有一个空白期，等到Ajax返回数据之后，再设置到HTML中，此时的HTML已经跳转至form中请求的新页面，点击IOS原生view的后退按钮，就看到了空白，事实上看到的是$(“body”).html()设置过程中空白页的页面，因为原有内容已经被这句话给清空了。所以看到了空白。

修改方案

将("body").html(h)修改为$("body").html(h)修改为$(“body”).append(h)，h内容中的form设置为隐藏。重试，就ok了！！我去啊，仅此记录！