jQuery Mobile使用中遇到的坑！填坑很难，但很有成就感。。

jQuery Mobile使用中遇到的坑！填坑很难，但很有成就感。。

最近参与到一个项目的前端开发中，为了提高用户体验使用到了jQuery Mobile。主要是用到了页面过渡效果，这种效果可以做到页面跳转的时候比较高大上，而且过渡的时候只加载dom，不用每次都加载css、js等，会在一定程度上提高页面加载速度。下面记录一下我在使用JM时遇到的莫名奇妙的坑。
1. 白屏问题
首先这问题很多人都有碰到，可以搜索到很多这方面的文章和解决方案，但是在我看来都是没有用。
现象就是我从index.html跳转到info.html后，再从info.html返回到index.html时页面就会白屏。
index.html ：

<a href="info.html" data-transition="slide">个人中心</a>

info.html ：

<a href="index.html" data-transition="slide" data-direction="reverse">返回首页</a>

网友们提供最多的解决方案是在返回的时候使用data-ajax=false，但是这样会导致页面过渡效果消失，这是我果断不能接受的原因。
这个问题的原因我至今不解，但是经过测试，在页面跳转的时候使用changePage就不会出现白屏问题，于是页面的跳转我全部采用了changePage，以下是我用js做的封装：

function to_html(pageurl, isreverse){
    isrev = isreverse || false
    $.mobile.changePage(pageurl, {
        allowSamePageTransition: true,
        transition: "slide",
        reverse: isrev,
        reloadPage: true,
    })
}

因为我的项目里几乎每个页面里都是动态加载的内容，所以我默认reloadPage:true，reverse默认为false，在要返回的页面设置为true即可。

<a href="javascript:to_html('index.html', true)">返回首页</a>

不仅仅a标签可以用，所有的页面跳转都可以改成通过这种方法！
OK！感觉完美解决！但是无形中又给自己挖了个坑。当我访问index.html?a=1这个链接时，再从info.html返回时参数就没了。那么问题就来了。不过也很好解决，就是要再跳转和返回的页面都加上你的参数。
<a href="javascript:to_html('index.html?a=1', true)">返回首页</a>
2. 页面显示不全
这个问题我在PC端时没有碰到的，但是在iPhone safari上却频频出现，这样就加大了调试的难度，困扰了我很久。后来在MAC上进行调试才找到解决办法，问题的原因依旧不解。
现象也是出现在页面返回时，不知道是不是我我采用to_html()给自己挖的坑。首先在此页面刷新是没有任何问题的，但是当我跳转到其他页面再返回到此页面时，一定概率就会出现超出safari浏览器的部分不显示的现象。
解决办法就是在自己的css文件中加上如下代码：

.ui-page{overflow-y:auto !important;}

我在MAC上调试的时候发现有时候.ui-page的样式为overflow：hidden，这就是页面显示不全的原因了，加上以后代码虽然好了，但是会出现没有滚动条的情况，滑动就没那么流畅。唉！先这么将就吧！
3. js加载问题
所有的js、css文件最好放在head中加载，自己的js要写在body中，否则不会执行。如果你在body中加载js，就会得到如下警告：

jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

意思就是强烈不建议，会影响用户体验！
4. 首次返回页面时js执行无效果
现象是当我首次（只有在首次会出现）从info.html返回index.html时，index.html中通过js动态加载的内容并没有显示。
经过鄙人不懈研究发现，首次在返回index.html时，info.html中有两个data-role=”page”的元素，这就是问题所在（我猜测这也是引起白屏的原因，没有再去深究），所以我移除了没用的一个。问题解决！

function remove_nouse_dataurl(){
    $(document).on("pageshow", ()=>{
        $(document).off("pageshow")
        $("div[data-role='page']:not([data-url^='"+document.location.pathname+"'])").remove()
    })
}

在每个页面都要做这个操作，虽然只有首次会有两个data-role=”page”。在你的页面上加上如下内容：

<script type="text/javascript">
    (() => {
        remove_nouse_dataurl()
        //show_your_content()
    })()
</script>

OK!完美解决！

以一颗虚心、虔诚的心前行！共勉之！