美文网首页
h5plus 监听新打开webview 手机返回按钮

h5plus 监听新打开webview 手机返回按钮

作者: 醉笙情丶浮生梦 | 来源:发表于2019-07-05 16:27 被阅读0次

    目前这样同时接管了手机返回按钮和 webview 左上角的返回按钮

    var nw = null;
    nw = openViewUrl(url, true);
    
    // 监听“返回”按钮事件
    plus.key.addEventListener("backbutton", function() {
      console.log("返回键已被按下--------");
      nw.canBack(function(e) {
        console.log("是否可后退:" + e.canBack);
        if (e.canBack) {
          nw.back();
        } else {
          console.log("关闭");
          nw.close();
          // 无效
          // plus.key.removeEventListener("backbutton");
          removeEventTest();
        }
      });
    });
    
    // 取消监听“返回”按钮事件
    function removeEventTest() {
      console.log("取消监听“返回”按钮事件");
      plus.key.removeEventListener("backbutton", onback);
    }
    
    //打开外部页面 返回窗口标识符
    function openViewUrl(url, back) {
      console.log("打开url窗口" + back);
    
      var sw = plus.nativeUI.showWaiting();
      var w = plus.webview.open(
        url,
        url,
        {
          errorPage: "404.html",
          top: "0px",
          bottom: "0px",
          statusbar: {
            // 顶部电量栏 背景颜色
            background: window.backgroundColor
          },
          // backButtonAutoControl: "close",
          backButtonAutoControl: back ? "none" : "close",
          titleNView: {
            backgroundColor: window.backgroundColor,
            autoBackButton: true,
            titleColor: "#FFFFFF"
          },
          progress: window.backgroundColor,
          zindex: 1000
        },
        "auto",
        200,
        function() {
          sw.close();
          sw = null;
        }
      );
      return w;
    }
    

    改造后

    //打开外部页面 返回窗口标识符
    function openViewUrl(url, back, btn) {
      console.log("打开url窗口" + back);
    
      var sw = plus.nativeUI.showWaiting();
      var w = plus.webview.open(
        url,
        url,
        {
          errorPage: "404.html",
          top: "0px",
          bottom: "0px",
          statusbar: {
            // 顶部电量栏 背景颜色
            background: window.backgroundColor
          },
          // backButtonAutoControl: "close",
          backButtonAutoControl: back ? "none" : "close",
          titleNView: {
            backgroundColor: window.backgroundColor,
            // 参数 btn 是true 就不显示返回按钮 而显示关闭按钮
            autoBackButton: btn ? false : true,
            titleColor: "#FFFFFF",
            buttons: btn
              ? [
                  {
                    type: "close",
                    float: "left",
                    onclick: clickButton
                  }
                ]
              : []
          },
          progress: window.backgroundColor,
          zindex: 1000
        },
        "auto",
        200,
        function() {
          sw.close();
          sw = null;
        }
      );
    
      function clickButton() {
        w.close();
        console.log("点击了关闭按钮");
        removeEventTest();
      }
    
      // 取消监听“返回”按钮事件
      function removeEventTest() {
        plus.key.removeEventListener("backbutton", function() {
          // 不打印 但是移除生效
          console.log("成功取消js监听“返回”按钮事件");
        });
      }
    
      return w;
      //    w.show("auto",200,);
      //     ;
    }
    

    这种写法在有些有实体返回按键手机又问题
    有的页面无法后退,有的页面后退直接提示再按一次退出,
    再次改造

    var nw = null;
    nw = openViewUrl(url, true);
    window.pageNw = nw;
    
    mui.init({
      swipeBack: true, //启用右滑关闭功能
      keyEventBind: {
        backbutton: true //开启back按键监听(默认就是true)
      },
      beforeback: function() {
        console.log("home beforeback" + window.pageNw);
        // 判断手机回收的页面是否存在
        if (window.pageNw) {
          var nw = window.pageNw;
          nw.canBack(function(e) {
            console.log("是否可返回:" + e.canBack + JSON.stringify(e));
            if (e.canBack) {
              nw.back();
            } else {
              console.log("关闭");
              nw.close();
              window.pageNw = null;
            }
          });
          return false;
        }
        var ws = plus.webview.getDisplayWebview();
        //              console.log(JSON.stringify(ws));
        var isHome = false;
        for (var i = 0; i < ws.length; i++) {
          if (ws[i].id && ws[i].id.indexOf("home") != -1) {
            isHome = true;
          }
        }
        if (!isHome) {
          plus.webview.close(ws[ws.length - 1]);
          return false;
        }
        return isHome;
      }
    });
    

    相关文章

      网友评论

          本文标题:h5plus 监听新打开webview 手机返回按钮

          本文链接:https://www.haomeiwen.com/subject/xrmehctx.html