`
cuiyadll
  • 浏览: 203603 次
文章分类
社区版块
存档分类
最新评论

微信浏览器自带的返回上一页的停留位置

阅读更多
http://blog.csdn.net/wangbao2111/article/details/50633790
我们做过微信的应该都知道,微信自带的返回上一页,就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。
解决办法:利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页(当前页面)之后。就会onload一下。设置最后一次scrollTop的值。以及一次性通过ajax传递之前加载的次数size渲染页面。这样在微信里面就可以实现和PC一样的效果。
简易代码如下:
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
var curPage = 1; //当前页码 
window.onload = function() 

<span style="white-space:pre">    </span>if(window.sessionStorage){ 
<span style="white-space:pre">        </span>var top = parseInt(sessionStorage.getItem("top")); 
    <span style="white-space:pre">    </span>var size = parseInt(sessionStorage.getItem("size")); 
        top = top?top:0; 
        size = size?size:1; 
                  
        for (var i = 1; i <= size; i++){ 
        <span style="white-space:pre">    </span>//此处调用ajax填充数据 
        }; 
        document.body.scrollTop = top; 
    } 

 
$(window).scroll(function(){ 
   <span style="white-space:pre"> </span>totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
<span style="white-space:pre">    </span>var tops=document.body.scrollTop; 
   <span style="white-space:pre"> </span>if(window.sessionStorage){ 
       <span style="white-space:pre">     </span>sessionStorage.setItem("top",tops); 
       <span style="white-space:pre">     </span>sessionStorage.setItem("size",curPage); 
   <span style="white-space:pre"> </span>} 
}); 
分享到:
评论

相关推荐

    vue实现微信浏览器左上角返回按钮拦截功能

    主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    易语言调用PC微信浏览器CALL

    采用易语言编写,适用PC微信2.6.6.28,其他版本没测试。 共两个文件。 1,【注入工具】,注入之前 微信要退出 ...2.【demo文件】 用于注入调用微信浏览器call? 请把这两个文件放在同一目录中。 运行注入工具即可

    H5页面禁用微信浏览器下拉

    H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示,在JS文件中定义此方法即可。

    解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。 ...

    java模拟微信浏览器访问.rar

    在Java编程中,模拟微信浏览器访问Web页面是一个常见的需求,特别是在自动化测试、数据抓取或者模拟用户行为的场景。这个“java模拟微信浏览器访问.rar”压缩包中的主要文件是“MonitorWeixinBrowser.java”,我们...

    html支持微信浏览器自动播放音频及视频

    微信作为中国最流行的社交应用之一,其内置的浏览器对于多媒体内容的支持是开发者关注的重点。本篇文章将详细探讨如何在HTML中实现微信浏览器上的音频和视频自动播放功能,并针对Android和iOS系统进行差异化处理。 ...

    微信浏览器内显示遮罩层提示点击右上角

    本文将详细探讨如何实现“微信浏览器内显示遮罩层提示点击右上角,选择在浏览器中打开链接”的功能,以及相关技术要点。 首先,我们需要理解微信内置浏览器(X5内核)的工作原理。微信浏览器是基于腾讯自家的X5 ...

    微信浏览器打开外部浏览器

    当检测到请求来自微信浏览器时,返回一个包含重定向指令的页面,引导用户自动跳转到外部浏览器。 在实际应用中,开发者需要根据具体需求和用户的使用场景选择合适的方法。同时,考虑到用户体验,应该尽量避免频繁或...

    JS判断是否在微信浏览器打开的简单实例(推荐)

    以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开。当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以...

    微信浏览器ua,手机微信UA 2022年2月最近版本10W条

    收集了数十万各种微信版本的的微信浏览器UA。 Mozilla/5.0 (Linux; Android 9; vivo X21A Build/PKQ1.180819.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/86.0.4240.99 XWEB/3179 MMWEBSDK...

    自动复制内容_微信浏览器自动复制内容_

    在IT行业中,自动复制内容是一项常见且实用的技术,特别是在移动设备和特定应用环境中,例如微信浏览器。微信浏览器作为中国最流行的社交媒体平台微信内置的浏览工具,它的功能不断更新以满足用户需求。本篇文章将...

    微信浏览器调用支付宝浏览器中打开

    博文中资源

    微信浏览器左上角返回按钮监听的实现

    微信开发的时候,在公众号菜单中打开一个H5页面(如:个人中心),在这个页面上的一些操作,经过多次跳转后,点击左上角的返回按钮,发现会原封不动的返回至上一级页面。 即 公众号菜单-&gt;A-&gt;B-&gt;C,点击返回后,返回了B...

    微信内置浏览器调试工具

    微信内置浏览器调试工具 微信调试 公众号调试 微信浏览器调试

    C#-Net判断微信内置浏览器网页

    C# 。Net判断微信内置浏览器网页,微信内置浏览器打开的网页

    video在微信浏览器引导用户触摸自动播放解决方案

    video在移动端微信浏览器上会出现全屏的情况,而且无法自动播放(这是由微信官方开发团队设定的,暂无根本解决办法),此Demo是在进入页面时生成一个Dom将video部分进行遮盖,这个Dom可以看作是一个进入页面后的弹窗...

    vue 解决在微信内置浏览器中调用支付宝支付的情况

    payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == “micromessenger” 这...

    苹果浏览器微信底部返回栏显示/隐藏的问题

    此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, title, #);... document.addEventListener...

    微信浏览器模拟器.rar

    微信浏览器模拟器,解决只能使用微信浏览器打开的问题,方便调试与查看源代码。个人写的工具,希望对你有帮助

    识别微信浏览器

    // 如果是微信浏览器,返回true,否则返回false ``` 2. **特征检测**:除了User-Agent,还可以通过检测某些只有微信浏览器特有的功能或行为来进行判断。例如,微信浏览器支持微信支付,可以尝试调用微信支付接口,...

Global site tag (gtag.js) - Google Analytics