HBuilder app开发：mask遮罩实现父子页面联动。

Posted 2022-12-10 暴疯禹

mui提供的mask遮罩点击遮罩部分时，会自动调用mask.close();

父子页面mask遮罩联动，第一反应写到mui.createMask()的回调函数中：

(父页面)

var mask

mui.plusReady()

  mask=mui.createMask(function ()

    plus.webview.currentWebview().children()[0].evalJS('mask.close');

  );

(子页面)

var mask

mui.plusReady()

  mask=mui.createMask(function ()

    plus.webview.currentWebview().opener().evalJS('mask.close');

  );

结果： Uncaught RangeError: Maximum call stack size exceeded. 丫的，死循环！

长记性后：

重写mask.close()方法：

(父页面)

var mask

var oldclose;

mui.plusReady()

  mask = mui.createMask();

  //原mask.close方法

  oldclose = mask.close;

  //重写mask.close方法

  mask.close = function ()

    if (v != 'nopass') //写成v == null也行

      console.log('-- in father != nopass --');

      //因为点击遮罩时只会执行"mask.close()"，所以v==null，进入这里if模块，调用子页面关闭方法。

      //调用子页面重写close()时，加上参数不让子页面的close()继续传递。

      plus.webview.currentWebview().children()[0].evalJS('mask.close("nopass")');

   

    //关闭本页面遮罩

    oldclose();

 

(子页面 与父页面基本一致)

var mask

var oldclose;

mui.plusReady()

  mask = mui.createMask();

  //原mask.close方法

  oldclose = mask.close;

  //重写mask.close方法

  mask.close = function ()

    if (v != 'nopass') //写成v == null也行

      console.log('-- in child != nopass --');

      //因为点击遮罩时只会执行"mask.close()"，所以v==null，进入这里if模块，调用父页面关闭方法。

      //调用父页面重写close()时，加上参数不让父页面的close()继续传递。

      plus.webview.currentWebview().children()[0].evalJS('mask.close("nopass")');

   

    //关闭本页面遮罩

    oldclose();