iOS 11 select 上的 Phonegap / Cordova 在 selecting 选项后再次显示弹出窗口

Question

我在 iOS 11 和 iPad 上使用 Phonegap 时遇到问题。如果单击 select，它会在弹出窗口中显示选项。 select 后，弹出窗口短暂消失，select 中的选项发生变化，然后弹出窗口重新出现。以下消息在 Xcode 控制台中：

[Warning] Application tried to represent an active popover presentation: <UIPopoverPresentationController: 0x100c3e450>

编辑：弹出窗口重新出现后，点击它没有任何反应。

如何让 select 在 select 选择一个选项后不重新显示弹出窗口？

这是使用最新的 Phonegap 7.0.1。

这只是一个普通的 html select:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'">
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>

您可以在此处下载示例项目：

https://github.com/tomkincaid/selecttest

我是运行这个直接在Xcode.

打开platforms/ios/SelectTest.xcodeproj

编辑：有两个 select，行为更奇怪。

<select id="select1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="select2">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>

点击select1，弹出select1选项。

Select一个选项，弹出窗口短暂消失然后重新出现。

单击正文使弹出窗口消失。

单击 select2。 select1 弹出窗口出现。

单击正文使弹出窗口消失。弹出窗口短暂消失，然后重新出现为空。

单击正文使弹出窗口消失。

再次单击 select2。现在它显示正确的弹出窗口。

Answer 1

iOS11 上的 UIWebVIew 似乎是 iPad 上所有应用程序的问题，而不仅仅是 Phonegap/Cordova。由于 UIWebVIew 已针对 WKWebView 贬值，因此 Apple 不太可能修复它。在 Phonegap/Cordova 使用 WKWebView 之前，我一起破解了这个修复程序。基本上，它将 div 放在 select 上，然后从自定义插件中打开一个选择器。

index.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="PhonegapUtility.js"></script>
<script type="text/javascript">

function onBodyLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    addSelectButton('#selecta');
    addSelectButton('#selectb');
}

function addSelectButton(selectID) {
    var u = new PhonegapUtility();
    u.isIpad(function(resp){
        if (resp == 1) {
            var buttonID = selectID+"Button";
            if($(buttonID).length == 0) {
                $("body").append("<div id='"+buttonID.replace("#","")+"' onclick='showPicker(\""+selectID+"\");'></div>");
            }
            $(buttonID).css("position","absolute");
            $(buttonID).css("left",$(selectID).offset().left+"px");
            $(buttonID).css("top",""+$(selectID).offset().top+"px");
            $(buttonID).css("width",$(selectID).width()+"px");
            $(buttonID).css("height",$(selectID).height()+"px");
            // need to adjust this for margin and padding
        }
    });
}

function showPicker(selectID) {
    var optionArray = [];
    $(selectID).find('option').each(function(index,element){
        optionArray.push(element.text);
    });
    var u = new PhonegapUtility();
    u.showPicker(optionArray.join("|||"),$(selectID).prop('selectedIndex'),function(resp){
        $(selectID+" option")[resp].selected = true;
    });
}

</script>
</head>
<body onload="onBodyLoad();">

<select id="selecta">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<select id="selectb">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>

</body>
</html>

PhonegapUtility.h

#import <Cordova/CDV.h>
@interface PhonegapUtility : CDVPlugin <UIPickerViewDelegate,UIPickerViewDataSource>
@property (strong, nonatomic) NSString *callbackId;
@property (strong, nonatomic) UIPickerView *pickerView;
@property (strong, nonatomic) UIView *pickerWrappertView;
@property (strong, nonatomic) NSArray *pickerData;
- (void) isIpad:(CDVInvokedUrlCommand*)command;
- (void) showPicker:(CDVInvokedUrlCommand*)command;
- (void) pickerDone;
@end

PhonegapUtility.m

#import "PhonegapUtility.h"
#import "AppDelegate.h"

@implementation TomPhonegapUtility

@synthesize callbackId,pickerData,pickerView,pickerWrappertView;

- (void) isIpad:(CDVInvokedUrlCommand*)command {
    int iPad = 0;
    if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ) iPad = 1;
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsInt:iPad];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

- (void) showPicker:(CDVInvokedUrlCommand*)command {

    callbackId = [[NSString alloc] initWithString: command.callbackId];

    AppDelegate *appDelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];
    UIViewController *rootViewController = appDelegate.window.rootViewController;

    pickerData = [[command.arguments objectAtIndex:0] componentsSeparatedByString:@"|||"];

    float viewWidth = rootViewController.view.bounds.size.width; //[UIScreen mainScreen].bounds.size.width;
    float viewHeight = rootViewController.view.bounds.size.height; //[UIScreen mainScreen].bounds.size.height;

    UIToolbar *toolBar= [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, viewWidth, 44)];
    [toolBar setBarStyle:UIBarStyleDefault];
    UIBarButtonItem *flex = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    UIBarButtonItem *barButtonDone = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                                      style:UIBarButtonItemStylePlain
                                                                     target:self
                                                                     action:@selector(pickerDone)];
    toolBar.items = @[flex, barButtonDone];

    pickerView = [[UIPickerView alloc] init];
    [pickerView setDataSource: self];
    [pickerView setDelegate: self];
    [pickerView setFrame: CGRectMake(0, toolBar.frame.size.height, viewWidth, 180.0f)];
    pickerView.showsSelectionIndicator = YES;

    [pickerView selectRow:[[command.arguments objectAtIndex:1] intValue] inComponent:0 animated:NO];

    pickerWrappertView = [[UIView alloc] initWithFrame:CGRectMake(0, viewHeight-toolBar.frame.size.height-pickerView.frame.size.height, viewWidth, toolBar.frame.size.height + pickerView.frame.size.height)];
    pickerWrappertView.backgroundColor = [UIColor whiteColor];
    [pickerWrappertView addSubview:pickerView];
    [pickerWrappertView addSubview:toolBar];

    [rootViewController.view addSubview:pickerWrappertView];
}

- (void) pickerDone {
    int selectedIndex = (int) [pickerView selectedRowInComponent:0];
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsInt:selectedIndex];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:callbackId];
    [pickerWrappertView removeFromSuperview];
}

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return [pickerData count];
}

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [pickerData objectAtIndex:row];
}

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
}

Answer 2

您可以尝试使用发布标志构建您的应用程序吗？类似于：

cordova build --release ios

我可以在没有发布标志的情况下重现问题，但有了它，问题就消失了。因此，我想知道这个问题的真正根源：它真的在苹果方面吗？似乎在 Cordova 方面......或者我可能遗漏了一些东西。

关于我的环境的一些信息可能有用：

iOS 11.0.1
科尔多瓦 CLI 6.5.0
科尔多瓦-iOS 4.4.0

编辑：我的错，它与发布版本完全无关，这只是因为我的发布版本是在另一个 Mac、运行上完成的 XCode 8. 确实，只有当您使用 XCode 9 构建应用程序时才会出现此问题。从 XCode 8 构建 iOS11 的应用程序正在运行，因此我的建议是使用 XCode 8 直到我们在 Apple 或 Cordova 方面都有可靠的解决方法。

来源：https://forums.developer.apple.com/thread/88169

Answer 3

刚刚运行遇到这个故障。我发现这个插件可能对大家有帮助：

https://github.com/apache/cordova-plugin-wkwebview-engine

基本上强制 Cordova 使用 WKWebView。只是一个免责声明...我没有运行我们的应用程序在使用后通过适当的浸泡测试所以我不知道这是否会导致其他问题，但它确实解决了 select 问题。

目前在 Cordova v.7.0.1 和 Cordova iOS 平台 4.4.0

iOS 11 select 上的 Phonegap / Cordova 在 selecting 选项后再次显示弹出窗口

Phonegap / Cordova on iOS 11 select displays pop-up again after selecting option

uiwebview

ios

cordova

phonegap

ios11