账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    pushstate返回,ios端微信内置浏览器js未重载导致重复返回的问题,安卓没问题
    51
    0

    首先我有三个页面,页面逻辑是A->B->C点击递进。

    要求B页面返回A页面的时候,刷新A页面数据,于是我将返回键从onclick="window.history.go(-1)"改成了onclick="window.location.href = document.referrer"。

    但是这样会导致一个问题,用户不点击我的返回键,改点击物理按键的时候,只会返回,并不会刷新。

    于是寻找解决办法,加入了用pushstate编写的XBack函数,目的是为了监听返回的事件,然后强制刷新。

    ;!function(pkg, undefined){
        var STATE = 'x-back';
        var element;
    
        var onPopState = function(event){
            event.state === STATE && fire();
        }
    
        var record = function(state){
            history.pushState(state, null, location.href);
        }
    
        var fire = function(){
            var event = document.createEvent('Events');
            event.initEvent(STATE, false, false);
            element.dispatchEvent(event);
        }
    
        var listen = function(listener){
            element.addEventListener(STATE, listener, false);
        }
    
        ;!function(){
            element = document.createElement('span');
            window.addEventListener('popstate', onPopState);
            this.listen = listen;
            record(STATE);
        }.call(window[pkg] = window[pkg] || {});
    
    }('XBack');

    代码就变成如下,虚拟返回按键也变回了window.history.go(-1),因为XBack也会捕捉虚拟的返回,然后执行监听后的逻辑。

    此段代码只在B页面

    <script src="/theme/we/js/xback.js"></script>  
    
    XBack.listen(function(){
      window.location.href = document.referrer
    });

    这样安卓端是没有任何问题的,但是我突然发现,ios端的C页面返回B页面的时候居然会同时触发B页面的XBack逻辑!!直接导致我从C页面返回B页面的时候,不会停留在B,直接又返回到了A!!

    是ios从B页面跳到C页面的时候依旧加载了B页面的js文件吗??导致执行C页面的虚拟返回键的history.go(-1)的时候,触发了来自B页面的XBack文件???

    还是Xback的触发在iphone微信浏览器里会有问题?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • ミ长发小鹿纯▽\ 普通会员 1楼

      这个问题可能是由于iOS端微信内置浏览器的JS未正确地重载导致的。在微信中,JavaScript引擎对HTML标签进行了转义,例如,你可能在HTML中使用了<a>标签,而iOS端的微信内置浏览器可能会将<a>标签解读为一个链接,而不是一个按钮。

      为了解决这个问题,你需要确保iOS端微信内置浏览器的JavaScript引擎正确地解析了HTML标签。这可能需要你在HTML中使用<a>标签时,添加一些特殊的转义字符,或者在JavaScript代码中添加一些条件语句来判断HTML标签的类型。

      此外,你还需要确保JavaScript代码中的事件处理函数在所有设备上都能正确地执行。在iOS端微信内置浏览器中,由于JavaScript引擎的限制,事件处理函数可能无法正确地执行,特别是对于跨平台的JavaScript。

      最后,你可以使用一些前端框架或者库,如React Native,Vue Native等,来解决这个问题,这些框架和库通常会提供一些方法来处理跨平台的JavaScript问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部