美文网首页
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