Cordova中如何将UIPickerView显示在InAppBrowser上层？

这个问题本质上是iOS视图层级优先级导致的：InAppBrowser的WebView窗口默认会覆盖在原生插件的UI组件之上。下面给你两个可行的解决方案，按推荐程度排序：

方案1：修改listpicker插件的iOS原生代码（最直接有效） #

cordova-plugin-listpicker默认是把UIPickerView添加到当前WebView的视图层级里，而InAppBrowser是独立的窗口，所以会被盖住。我们可以修改插件的iOS实现，让选择器直接挂载到系统的顶层窗口：

1. 找到你的Cordova项目中插件的iOS源码，路径一般是plugins/cordova-plugin-listpicker/src/ios/ListPicker.m
2. 找到显示UIPickerView的代码段（通常是在showPicker或类似方法里），找到类似这样的代码：

   [self.view addSubview:self.pickerView];
   

3. 把它替换成以下代码，将选择器添加到系统的keyWindow（顶层窗口）：

   UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
   // 设置picker的位置，默认在屏幕底部，高度216是UIPickerView的标准高度
   self.pickerView.frame = CGRectMake(0, keyWindow.bounds.size.height - 216, keyWindow.bounds.size.width, 216);
   [keyWindow addSubview:self.pickerView];
   // 确保picker在所有视图最上层
   [keyWindow bringSubviewToFront:self.pickerView];
   

4. 保存修改后，重新编译你的Cordova iOS项目：

   cordova build ios
   

这样修改后，listpicker的选择器会直接显示在所有窗口的最上层，包括InAppBrowser。

方案2：临时调整InAppBrowser的显示状态（无需改插件，作为备选） #

如果不想修改插件源码，可以在调用listpicker前后，临时调整InAppBrowser的透明度或隐藏它，选择完成后再恢复：

// 假设你已经保存了InAppBrowser的实例
let inAppBrowserRef = cordova.InAppBrowser.open('your-url', '_blank', 'options');

// 调用listpicker之前，降低InAppBrowser的透明度
inAppBrowserRef.executeScript({
  code: "document.body.style.opacity = '0.5';"
});

// 调用listpicker插件
cordova.plugins.listpicker.show({
  // 你的配置参数
}, function(selectedItem) {
  // 选择完成后，恢复InAppBrowser的透明度
  inAppBrowserRef.executeScript({
    code: "document.body.style.opacity = '1';"
  });
}, function(error) {
  // 出错时也要恢复
  inAppBrowserRef.executeScript({
    code: "document.body.style.opacity = '1';"
  });
});

这个方案的体验不如方案1，但不需要修改原生代码，适合快速测试。

内容的提问来源于stack exchange，提问作者Christian