返回上一页,或者回主页 Go back or go home

yuanoook
yuanoook 发布于 2016-11-09 12:22:57 浏览:237 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
#问题场景
H5页面头部,设置了一个返回键
返回上一页,或者回主页 Go back or go home
  • 如果设置成 a 标签,指定链接。对变更则不友好,也不支持当前页面嵌入多个导航入口页面的场景。
  • 如果只使用 history.back() ,在独立打开的情况下,从其他app跳转到浏览器 [包括app内置浏览器],history.back() 直接失效。

#目标
当点击返回键:
  • 如果 (当前页面是从其他地方跳转过来的) 跳回上一页;
  • 否则 跳回备选页面 [主页];

#思路
首先尝试返回,如果成功就不用管了,如果失败则跳转到备选链接。
关键点在于检测是否跳转成功。
  • 如果跳出成功,当前页面会被关闭,里面所有的 js 代码都会停止执行。
  • 如果跳出失败,当前页面保留,里面的 js 可以继续执行。
这里把备选方案的代码放在跳出代码的后面就行了。
* 所有用 js 处理跳出当前窗口的操作,都可以用这个思路。

#解决方案
/*&*//*
        // How to use:
        dom_back_arrow.addEventListener('click', function(){
            var fallback_url = 'http://ceping.hk515.com/';
            goBack(fallback_url);
        });
    */

    function goBack(fallback) {
        var useFallback = true;
        window.addEventListener('beforeunload',function(){
            useFallback = false;
        });
        window.history.back();
        setTimeout(function(){
            if (useFallback){ window.location.href = fallback; }
        }, 100);
    }


#实例
http://huodong.hk515.com/huodong20161107/index.html
#参考
http://stackoverflow.com/questions/3588315/how-to-check-if-the-user-can-go-back-in-browser-history-or-not
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新