[移动开发]移动端iframe跳转第三方应用出现无法滑动问题

问题

为了实现跨平台兼容，我们的项目用的是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。