IOS 设置UIViewController为背景半透明浮层弹窗,查看富文本图片详情

使用场景:UIViewController1 打开 UIViewController2(背景半透明弹窗)

案例:打开富文本网页<img>图片的url查看图片详情

WKWebView WKNavigationDelegate代理方法设置js代码点击事件

objectivec 复制代码
///注册添加图片标签点击js方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    ///js添加图片点击事件
    NSString *jsClickImage =@"function registerImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0; i < length;i++){img=imgs[i];if(\"ad\" ==img.getAttribute(\"flag\")){var parent = this.parentNode;if(parent.nodeName.toLowerCase() != \"a\")return;}img.onclick=function(){window.location.href='image-preview:'+this.src}}}";
    
    [webView evaluateJavaScript:jsClickImage completionHandler:nil];
    [webView evaluateJavaScript:@"registerImageClickAction()" completionHandler:nil];
    
    [webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id _Nullable result,NSError *_Nullable error) {
        //获取webView内容高度
        CGFloat height = [result doubleValue];
//        [webView mas_updateConstraints:^(MASConstraintMaker *make) {
//              make.height.equalTo(@(height));
//        }];
        webView.frame = CGRectMake(0, 0, self.frame.size.width, height);
        [webView layoutIfNeeded];
        [webView setNeedsLayout];
        if (self.contentHeightCallback != nil) {
            self.contentHeightCallback(CGSizeMake(self.frame.size.width, height));
        }
    }];
    
}

///拦截点击图片
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSString *requestString = navigationAction.request.URL.absoluteString;
    NSString *imgKey = @"image-preview";
    if([requestString hasPrefix: imgKey]){
        NSString *url = [requestString substringFromIndex:imgKey.length+1];
        //查看图片详情
        [self showPicDetail:url];
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

showPicDetail:() 方法打开浮窗:

objectivec 复制代码
-(void) showPicDetail:(NSString *)imgUrl{
    ShowBigPicDetailViewController *vc = [[ShowBigPicDetailViewController alloc] init];
    vc.imageUrl = imageUrl;
    //设置全屏显示   关键语句,必须有
    vc.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    [self presentViewController:vc animated:YES completion:nil];
}

设置UIViewController2 背景半透明

objectivec 复制代码
- (void)viewDidLoad {
    [super viewDidLoad];
    //设置半透明背景
    [self.view setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5f]];
    ...
}

关闭浮窗弹窗:

objectivec 复制代码
[self dismissViewControllerAnimated:YES completion:nil];
相关推荐
sweet丶4 小时前
UIWindowScene 使用指南:掌握 iOS 多窗口架构
ios
崽崽长肉肉9 小时前
swift中的知识总结(一)
ios·swift
苏打水com10 小时前
第十九篇:Day55-57 前端工程化进阶——从“手动低效”到“工程化高效”(对标职场“规模化”需求)
前端·css·vue·html
TE-茶叶蛋11 小时前
html5-qrcode扫码功能
前端·html·html5
2501_9064676311 小时前
HTML5结合Vue3实现百万文件分块上传的思路是什么?
前端·html·html5·vue上传解决方案·vue断点续传·vue分片上传下载·vue分块上传下载
阿贾克斯的黎明11 小时前
现代前端的魔法标签:HTML5 语义化标签全解析
前端·html·html5
2501_9151063212 小时前
HTTP 协议详解,HTTP 协议在真实运行环境中的表现差异
网络·网络协议·http·ios·小程序·uni-app·iphone
我命由我1234513 小时前
Python Flask 开发:在 Flask 中返回字符串时,浏览器将其作为 HTML 解析
服务器·开发语言·后端·python·flask·html·学习方法
狮子座的男孩13 小时前
html+css基础:07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
前端·css·经验分享·html·伪类选择器·伪元素选择器·结构伪类