移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法

1、移动端上拉加载

网上有很多成熟的插件，比如iscroll。在这里介绍一下用jquery和js写的上拉加载方法。使用原生的去写上拉加载更多需要三个高度去做对比，以新闻类列表举例，首先需要整个dom的高度，其次需要移动设备窗口的高度，最后需要滚动条距离顶部的高度，移动设备的高度加上滚动条距离顶部的高度等于dom的高度时，表示已经滑动到底部，进而加载下一页，监听滚动条的滑动事件使用scroll()方法。当然这里也可以进行无感知加载，就是当移动设备高度和滚动条高度相加和dom高度接近时就加载下一页的数据。

2、移动端列表查看详情

以新闻列表为例，加载到第十页查看一条新闻的详情，查看详情后需要使用手机的物理回退按键回退到列表页，并且是当前点击的位置，因为移动端浏览器是在一个窗口下加载页面的，只要url地址发生变化，整个页面就会重新加载。如何解决这个问题呢，在这里提供两个思路：一、使用锚点定位和控制div显示隐藏属性。列表页是一个div用于显示列表，详情页是一个div用来展示详情，使用window.onhashchange方法用来监听锚点的变化，一个新闻对应一个id，通过监听锚点变化获取#号后面的新闻id，控制列表div隐藏和详情div的显示，进而展示详情，回退的时候同样使用window.onhashchange来监听，控制列表div的显示和详情div的隐藏。二、使用localStrrage或者sessionStorage。在这里详情页是一个单独的页面，从列表页到详情页的时候，需要先把当前新闻的dom内容、page页码和滚动条距离顶部的距离保存，保存后再跳转到详情页，从详情页返回列表页的时候，虽然url地址发生了变化，按道理来说应该重新初始化列表页面，在这里加上一个判断，判断是否存在页面存储的localStorage或者sessionStorage，如果存在就使用缓存的数据直接追加到页面上，包括滚动条的高度和page页码，如果不存在就重新初始化整个列表页面，这样就做到了查看详情，返回还是在原来的位置。

3、移动端查看原文使用iframe嵌套第三方页面

以新闻列表为例，在新闻详情页面查看原文链接的时候，如果使用iframe引入第三方的url地址正常是可以访问的，但是如果有些网站加了同源限制，禁止iframe引入自己的网站页面，这时候我们应该怎么办呢？

我们使用a标签直接跳转第三方页面。首先在查看新闻详情的时候把已有的dom、page和scrollTop值用localStorage存储起来，在这里为什么不用sessionStorage呢？因为当使用a标签跳转的时候，在移动端页面都是在一个窗口，两个url地址不是同源的话，之前的sessionStorage会消失，所以这里使用localStorage。查看原文后，手机物理回退到详情页的时候首先判断是否含有localStorage，有就直接展示缓存的数据，没有就重新加载列表，在这里展示完缓存数据后就要把localStorage清除掉，如果不清除的话，你刷新页面加载的还是你缓存的数据。接着判断url里面是否含有锚点，如果有代表是查看的详情页，取出id，隐藏列表页div，展示详情页div。

以上是在实际做移动端web项目时遇到的问题以及解决办法，在这里只提供了大致的思路，如果有不明白的或者有疑问的欢迎留言~，当然如果有更好的解决办法的话，欢迎指正！