问题

为了实现跨平台兼容,我们的项目用的是capacitor+vue框架,实际上就是在webview上用iframe实现页面的跳转功能,ios在跳转到第三方页面时,出现了无法滑动的情况。

由于iframe在ios上宽度撑开屏幕问题,设置了iframe的scrolling为no,因此才会出现无法滑动问题。

解决办法

由于不能直接改iframe,于是我们选择迂回救国,通过调用内置浏览器访问第三方页面。

  1. capacitor内置浏览器open()
    通过调用调用capacitor的内置浏览器打开第三方页面,但是该浏览器无法监听回调地址,因此无法实现改功能。
  2. 用 cordova APP 内置浏览器
    由于我们用的不是cordova框架,所以需要单独安装cordova-in-app-browser插件;
    实现代码如下:
// 调用跳转
openInAppBrowser({ url: model.payInfo, options: 'location=no,closebuttoncaption=结束' });

// 打开内置浏览器
function openInAppBrowser({ url, target = '_blank', options = 'location=no' } = {}) {
      const browserRef = cordova.InAppBrowser.open(url, target, options);
      let isCloseFromHtml = false; // 是否从 close.html 关的页面
      function messageListener(message) {
        if (message.data.type !== 'close') return;
        browserRef.removeEventListener('message', messageListener);
        isCloseFromHtml = true;
        browserRef.close();
      }
      // 监听用户是否按下了结束按钮
      browserRef.addEventListener('message', messageListener);
      const exitListener = () => {
        browserRef.removeEventListener('exit', exitListener);
        this.postMessage({ type: 'openInAppBrowserResult', result: { isCloseFromHtml } });
      };
      // 监听用户是否关闭浏览器
      browserRef.addEventListener('exit', exitListener);
    },

这样就可以实现,打开浏览器跳转到第三方页面,用户操作完关闭浏览器放回app。

Logo

前往低代码交流专区

更多推荐