移动端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项目时遇到的问题以及解决办法,在这里只提供了大致的思路,如果有不明白的或者有疑问的欢迎留言~,当然如果有更好的解决办法的话,欢迎指正!

原文地址:https://www.cnblogs.com/web-panpan/p/7766195.html