如何在 WKWebview 上添加 UIButton？

Posted 2023-03-22

【中文标题】如何在 WKWebview 上添加 UIButton？

【英文标题】：How to add UIButton on WKWebview?

【发布时间】：2019-10-18 03:34:30

【问题描述】：

我有两个视图控制器，其中 viewcontroller1 的 NSTimer 倒计时为 0 并显示 viewcontroller2。 viewcontroller2有一个wkwebview，我也想在上面加上UIButton。 因为我想创建一个关闭按钮来关闭 viewcontroller2。 我尝试在 wkwebview 上添加 UIButton，但我无法控制它的 NSlayoutConstrain。 我的代码有什么问题？ 谢谢。

红色按钮在右下角。

//  ViewController1.m

    -(void)timerFired 

        NSLog(@"===) self.count : %d", self.count);

            if (self.count == 0) 

                [self.timer invalidate];
                self.timer = nil;

                ViewController2 *vc = [[ViewController2 alloc] init];
                [self presentViewController:vc animated:YES completion:nil];

             else 
                self.count -= 1;
            

    

//  ViewController2.m

#import "ViewController2.h"
#import <WebKit/WebKit.h>

@interface ViewController2 ()<WKScriptMessageHandler, WKNavigationDelegate,WKUIDelegate>

@property (nonatomic,strong) WKWebView* webView;
@property (nonatomic,strong) UIButton* button;
@property (nonatomic, strong) WKWebViewConfiguration * webConfig;

@end

@implementation ViewController2

- (void)viewDidLoad 
    [super viewDidLoad];

    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:[self createWKWebApp]];
    [self.view addSubview: self.webView];
    [self.webView.configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];
    self.webView.scrollView.bounces = NO;
    [self.webView setContentMode:UIViewContentModeScaleAspectFit];
    self.webView.navigationDelegate = self;
    self.webView.UIDelegate = self;

    NSURL *url = [NSURL URLWithString:@"https://***.com/"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

    self.button = [UIButton buttonWithType: UIButtonTypeCustom];
    self.button.translatesAutoresizingMaskIntoConstraints = false;
    self.button.backgroundColor = UIColor.redColor;
    [self.button setTitle:@"CLOSE" forState:UIControlStateNormal];
    [self.button addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.button];

    NSLayoutConstraint *btnRight = [NSLayoutConstraint constraintWithItem:self.button attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20.0];
    NSLayoutConstraint *btnTop = [NSLayoutConstraint constraintWithItem:self.button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0];
    NSLayoutConstraint *btnWidth = [NSLayoutConstraint constraintWithItem:self.button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:30.0];
    NSLayoutConstraint *btnHeight = [NSLayoutConstraint constraintWithItem:self.button attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:30.0];
    [self.view addConstraints:@[btnRight, btnTop, btnWidth, btnHeight]];


- (void)btnClicked:(UIButton *)sender 

    NSLog(@"BTN CLICKED");

    [self dismissViewControllerAnimated:false completion:nil];


- (WKWebViewConfiguration *)createWKWebApp 
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    WKUserContentController *userContent = [[WKUserContentController alloc] init];

    config.userContentController = userContent;

    return config;


- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message 
    NSString *name = message.name;
    NSLog(@"===) message name = %@",name);
    NSLog(@"===) body class = %@",[message.body class]);

【问题讨论】：

确保将约束应用于父级（UIView）而不是 WKWebView

【参考方案1】：

你应该知道这样的约束

item1.attribute1 = multiplier × item2.attribute2 + constant

所以正确的约束常数应该是-20

NSLayoutConstraint *btnRight = [NSLayoutConstraint constraintWithItem:self.button attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20.0];

【讨论】：

谢谢，这是我的错误。但约束看起来也很连贯。

你想让按钮去哪里？

【参考方案2】：

它可能会帮助你。使用这些方法。

-(void)view.sendSubviewToBack(subview)

-(void)view.bringSubviewToFront(subview)

用法：

[self.view sendSubviewToBack:webview];

[self.view bringSubviewToFront:button];