询问下纯网页中使用openWindow打开的子网页有什么办法刷新父页面吗？

z***@gmail.com - Hbuilder是个好东西

如果你是用 js 的 window.open 打开的子页面。那么可以子页面中js调用

window.opener.location.reload();

来刷新父页面。

如果不是这样，一个方法就是在子页面中设置一个 cookie（或localstorage 或 sessionStorage），当需要刷新是就改变它的值。然后在父页面不停的 setInterval 来检测这个值是不是变化了。如果变化了就刷新。

若只如 (作者)

用的是mui.openWindow()的，纯网页上就没有办法了吗？

z***@gmail.com

我看了下mui.openWindow 的代码，这个如果是在纯手机浏览器里的话，调用的是 top.location.href = url . 所以你原来的页面等于被替换了。当然，大部分手机浏览器重新定义了这个方法，会缓存父级页面，看起来会像是两个窗口。这个要实现刷新也是有办法的，但是不能完全保证，而且会比较麻烦。我下面贴一段我之前写过的。看看你能不能用到。

2017-12-04 10:39

z***@gmail.com - Hbuilder是个好东西

//越来越多的手机浏览器回退时不会刷新页面  
            //部分手机可以触发pageshow事件，部分可以触发visibilitychange，部分手机什么也不会触发。。。  
            //然而有些页面，登陆后其实是需要刷新的。  
            //所以，并没有什么好办法。  
            var __lastTriggerTime = 0;  
            function __triggerBack(){  
                var now = new Date().getTime();  
                //0.5s内不再触发，防止多个事件重复触发  
                if( now - __lastTriggerTime < 500 ){  
                    return;  
                }  

                __lastTriggerTime = now;  
                $(document).trigger('jsGoBack'); //在代码里监听 jsGoBack 这个事件就好了。  
            }  

            //-----假设两者不会同时触发-----  
            //iPhone、华为等部分手机有效，触发onBack，通知页面刷新  
            $(window).on('pageshow', function(e){  
                if (e.persisted || window.performance && window.performance.navigation.type == 2) {  
                    __triggerBack();  
                }  
            });  

            //小米work  
            $(window).on('visibilitychange', function(e){  
                if( document.hidden == false ){  
                    __triggerBack();  
                }  
            });  

            //-----什么都不会触发的鬼畜手机------  
            //一个鬼畜的做法  
            //检测手机移动事件，如果页面被切走，则这个计时器就会被卡住，然后检测两次计时时间大于一定值就认为是用户切换过页面了  
            var __motionMarkTime = 0;  
            $(window).on('devicemotion', function(evt){  
                var now = new Date().getTime();  
                var lastMarkT = __motionMarkTime;  
                __motionMarkTime = now;  

                if( lastMarkT && now - lastMarkT > 800 ){  
                    __triggerBack();  
                }  
            });

z***@gmail.com

核心就是 3个事件了： pageshow ， visibilitychange 和 devicemotion 。第一个是最完美的，但是不是所有手机都支持。。最后一个是无奈之举，基本所有手机都会触发，但是会不停的触发。。

2017-12-04 10:40

若只如 (作者)

非常感谢，真的非常感谢！

若只如 (作者)

还是有点问题，难为情哈。

是这样的，我原本打算在页面使用setInterval不停的来检测的方法，但发现一旦mui.openWindow后，这个就失效了，应该就是你下面说的，当前页面被替换掉了，所以没用了？

像你说的新的办法，放在哪一个页面上做检测呢？

比如A需要可以刷新，A上mui.openWindow 打开B，你的方法应该也是放在A上面吗？

但A上面setInterval这个都没有效果，是不是3个办法也会没有效果呢？

z***@gmail.com - Hbuilder是个好东西

放到A页面上。会有效果的。

其实setInterval 也是可以的，但是需要从B页面返回A页面显示后才会有效果。这个时候 setInterval才会重新开始工作。

如果要用setInterval实现的话，那就必须在B页面设置一个标志位（放在cookie或者localStorage里）。
然后， setInterval 开始工作时，检测这个标志，如果存在，就执行相应代码，然后清除掉这个标记。

这个办法的缺点就是必须 A，B两个页面都要加处理的代码。

若只如 (作者)

很奇怪，我的A页面上有一个add按钮

                    var st = 0;  
                    doc.getElementById("add").addEventListener('tap', function() {  
                        st = setInterval(function() {  
                            st+=1;  
                            $.toast(st);  
                        }, 1000);  
                        $.openWindow({  
                            url: 'add.html'  
                        });  
                    });

按照你的意思就是设置定时后进行sessionStorage之类的判断，有没有被改变，如果有改变就执行我想要的，然后因为没有效果，我在这里做了个测试。
像代码里的。按理说我点击按钮后会激活定时器进行累加显示，然后跳转到后面的网页，但是等一段时间回到这个页面后，$.toast并没有被触发，所以我认为是被替换掉了。
上面这个大概就是我的测试代码，但不知道为何下个页面$.back()后没有效果呢，是我写错了吗？

若只如 (作者)

var st;  
var L = 0;  
doc.getElementById("add").addEventListener('tap', function() {  
    st = setInterval(function() {  
        L+=1;  
        $.toast(L);  
    }, 300);  
    $.openWindow({  
        url: 'add.html'  
    });  
});

上面有个变量写错了，但改成这样后，发现确实还是不行，回到这个页面后，定时器并没有激活了。

z***@gmail.com

你为什么要放在tap事件里触发呢？直接写在 script标签里直接调用。有个事情需要说明：A页面切换到B页面的时候，A页面实际上是被关闭了（但有缓存），也就是A页面就不存在了，那么A页面的js代码自然就不执行了。你返回后，A页面被重新从缓存中展示出来。那么你如果放在tap里，需要先tap一下才能触发执行。

2017-12-05 10:28

z***@gmail.com - Hbuilder是个好东西

贴一段代码，已测试：
从页面回来后，会发现toast值就变了。

//----------------- A页面 ------------------  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">  
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>  
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>  
    <script type="text/javascript">  

        setInterval(function(){  
        $.toast(sessionStorage['___test__tag']);  
      }, 500);  

    </script>  
</head>  
<body>  
    <a href="test2.html">xxxxxxxxxxxxxxxxxxx</a>  
</body>  
</html>

//------------------- B页面 -------------------------  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">  
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>  
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>  
</head>  
<body>  
    <script>  
   sessionStorage['___test__tag'] = new Date();   
  </script>  
</body>  
</html>

若只如 (作者)

非常感谢你提供的办法，让我实现了自动刷新功能。我这还有一个问题，也想请教你一下。
纯网页的，我有一个登录页面，一个主页面，一个功能页面，一个功能编辑页面。
登录成功后到主页面，选择一个功能进入功能页面，然后对功能可以编辑，每个页面都是用openWindow打开的，现在就是有个情况，例如在功能编辑页面时，长时间未操作，后台Session已经超时，这个时候我希望页面可以从功能编辑页面返回到登录页面，平常使用mui.back()的话只能退出一层，请问一下有什么好办法呢？直接更改当前页面的地址感觉好像不是太好的样子。

z***@gmail.com - Hbuilder是个好东西

建议你从逻辑上修改：登陆页在任何流程只会出现在最后一步。
意思就是说，如果页面A未登陆，那么跳转到登陆页，登陆成功后是进行返回操作，返回到A，而不是继续跳转到A.

对于你的功能编辑页面 X，那么当需要登陆时，在 X openwindow 到登陆页，当登陆成功后调用 mui.back 回到 X，而不是 openwindow去 X。

保证所有流程下，登陆页只在最后一步，登陆页的流程处理完之后，直接进行返回操作。

另外，如果你不想对的逻辑进行大的修改的话，那就使用 js原生方法处理吧。

//history.go 可以指定回到哪个页面。-1 前一页， -2 前一页的前一页，以此类推。  
//但是这个方法有个缺陷，就是你的流程是固定的， 当前页面的 -2 页面一定是你期望的页面，这样才能正常跳转，否则就跳乱掉了。。  
history.go(-2);

若只如 (作者)

非常感谢你的回答哈，我这边又有一个很奇怪的问题。
http://ask.dcloud.net.cn/question/50520 链接是这个，如果有时间的话，麻烦你帮我看一下吧，困扰我两天了。

询问下纯网页中使用openWindow打开的子网页有什么办法刷新父页面吗？

12 个回复

公告

相关问题

询问下纯网页中使用openWindow打开的子网页有什么办法刷新父页面吗？

与内容相关的链接

12 个回复

公告

相关问题