ios url编码_IOS和JS的交互，看这一篇文章就够了

最新推荐文章于 2023-09-11 09:00:00 发布

weixin_39911998

最新推荐文章于 2023-09-11 09:00:00 发布

阅读量184

点赞数

IOS和JS的交互，看这一篇文章就够了

创作不易，请珍惜，之后会持续更新，不断完善
Demo地址

WKWebView使用、JS的交互

演示(本来想贴张GIF作为演示流程的，害，太模糊不清了还是算了，话说简书写起来不方便呀，图片大小清晰度也挺难看的，吐槽下)，顺便列举下控制台的所有输出作为例证，相关输出用到的地方在代码注释处有写

控制台输出

创建WKWebView

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    // 创建wkWebView
    self.wkWebView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    self.wkWebView.UIDelegate  = self;
    self.wkWebView.navigationDelegate = self;
    [self.view addSubview:self.wkWebView];

WKNavigationDelegate

页面加载完成之后调用, 定义一个全局变量 arr

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    // 导航栏标题
    self.title = webView.title;
    // 定义一个全局变量 arr
    NSString *jsStr = @"var arr = [5, '谢佳培', 'xiejiapei']; ";
    [self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        // 页面加载完成之后调用, 定义一个全局变量 arr: (null)----(null)
        NSLog(@"页面加载完成之后调用, 定义一个全局变量 arr: %@----%@",result, error);
    }];
}

拦截网页的跳转链接: 在发送请求之前，决定是否跳转，点击提交按钮的时候会调用该方法

提交.png

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    // URL = @"lgedu://jsCallOC?username=Cooci&password=123456"
    // 获取请求的URL
    NSURL *URL = navigationAction.request.URL;
    // 获取URL Scheme，其作用为方便app之间互相调用而设计的
    NSString *scheme = [URL scheme];

    // 拦截lgedu
    if ([scheme isEqualToString:@"lgedu"])
    {
        // url是地址, 在某个主机目录下的文件的唯一标识符(统一资源定位符url)
        // domain是域名, 比如baidu.com就是域名，而其对应的ip地址指向了百度的服务器
        // host是主机, 默认情况http协议是80端口 https协议是443端口
        NSString *host = [URL host];

        // 主机名为jsCallOC
        if ([host isEqualToString:@"jsCallOC"])
        {
            // 解析URL
            NSMutableDictionary *temDict = [self decoderUrl:URL];
            NSString *username = [temDict objectForKey:@"username"];
            NSString *password = [temDict objectForKey:@"password"];
            // 用户名和密码：谢佳培------123456
            NSLog(@"用户名和密码：%@------%@",username,password);
        }
        else
        {
            NSLog(@"不明地址 %@",host);
        }
        // 不允许跳转
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    // 允许跳转
    decisionHandler(WKNavigationActionPolicyAllow);
}

解析URL地址，取得JS中的值

// 解析URL地址
- (NSMutableDictionary *)decoderUrl:(NSURL *)URL
{
    // URL = @"lgedu://jsCallOC?username=谢佳培&password=123456"
    // 分开参数
    NSArray *params = [URL.query componentsSeparatedByString:@"&"];
    NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];

    for (NSString *param in params)
    {
        // 分开键值对
        NSArray *dictArray = [param componentsSeparatedByString:@"="];

        if (dictArray.count 1)
        {
            /** 网络请求拼接中文参数,用户名登陆等很多地方会用到中文,UTF8编码显得颇为重要
             *  编码:
             *  NSString* hStr =@"你好啊";
             *  NSString* hString = [hStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
             *  NSLog(@"hString === %@",hString); // hString === %E4%BD%A0%E5%A5%BD%E5%95%8A
             *
             *  解码：
             *  NSString*str3 =@"\u5982\u4f55\u8054\u7cfb\u5ba2\u670d\u4eba\u5458\uff1f";
             *  NSString*str5 = [str3 stringByRemovingPercentEncoding];
             *  NSLog(@"str5 ==== %@",str5);// str5 ====如何联系客服人员？
             */
            // 取值, 中文解码
            NSString *decodeValue = [dictArray[1] stringByRemovingPercentEncoding];
            // 解码后放入tempDic
            [tempDic setObject:decodeValue forKey:dictArray[0]];
        }
    }

    return tempDic;
}

JS中相关代码如下

        >input type="button" value="提交" onclick="submit()" /br /<
        function submit(){
            alert('点击了提交按钮，调用loadURL方法获得URL');
            loadURL("lgedu://jsCallOC?username=谢佳培&password=123456");
        }

        function loadURL(url) {
            var iFrame;
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            iFrame.setAttribute("height", "0px");
            iFrame.setAttribute("width", "0px");
            iFrame.setAttribute("frameborder", "0");
            document.body.appendChild(iFrame);
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
        }

WKUIDelegate

使用OC样式的弹出警告框，覆盖JS的丑陋样式

// 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
    // 使用OC样式的弹出警告框，覆盖JS的丑陋样式
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *knowAction = [UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        // 回调完成
        completionHandler();
    }];
    [alert addAction:knowAction];
    [self presentViewController:alert animated:YES completion:nil];
}

OC 调用 JS方法

通过 evaluateJavaScript调用了JS中的showAlert方法
演示图：

代码片段：OC

    // JS方法
    // alert('我是一个可爱的弹框 \n'+messgae+'\n'+arr[1]);
    // arr[1]来自在我们在页面加载完成后定义的全局变量arr
    // msg: 我是一个可爱的弹框 登陆成功 谢佳培
    NSString *jsStr = [NSString stringWithFormat:@"showAlert('%@')",@"嗨，这是通过OC调用showAlert方法哦"];

    // OC 调用 JS方法
    [self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        // OC 调用 JS方法: token----(null)
        // Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，
        // 当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
        // 使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
        NSLog(@"OC 调用 JS方法: %@----%@",result, error);
    }];

代码片段：JS

        function showAlert(messgae){
            alert('我是一个可爱的弹框 \n'+messgae+'\n'+arr[1]);
            return "token";
        }

WKUserContentController

调整按钮大小适应APP页面

configuration.userContentController = [self wkwebViewScalPreferences];

// 调整按钮大小适应APP页面
- (WKUserContentController *)wkwebViewScalPreferences
{
    // js注入: json调整按钮大小脚本
    NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

    /** WKUserScript就是帮助我们完成JS注入的类，它能帮助我们在页面填充前或js填充完成后调用
     * 参数1:脚本的源代码
     * 参数2:脚本应注入网页的时间，是个枚举,End表示：在文档完成加载之后，但在其他子资源完成加载之前插入脚本
     * 参数3:是否加入所有框架，还是只加入主框架
     */
    WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    WKUserContentController *wkUserContentController = [[WKUserContentController alloc] init];
    [wkUserContentController addUserScript:wkUserScript];

    return wkUserContentController;
}

MessgaeHandle

JS相关代码: 发送了消息

        >input type="button" value="messgaeHandle" onclick="messgaeHandle()" /<>br /<
        function messgaeHandle(){
            // js -- android
            alert('给messageHandlers页面发送了“青春气息”');
            window.webkit.messageHandlers.messgaeOC.postMessage("青春气息");
        }

在viewWillAppear中监听消息，但是注意在viewWillDisappear需要移除，否则会造成循环引用，不会调用到dealloc方法

// 循环引用：self - webView - configuration - userContentController - self
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    // 添加scriptMessageHandler到所有的frames中,
    // html5中需要添加window.webkit.messageHandlers.>name<.postmessage>messageBody
    [self.wkWebView.configuration.userContentController addScriptMessageHandler:self name:@"messgaeOC"];
}// 需要根据name移除所注入的scriptMessageHandler来打破循环引用, 否则不会调用到dealloc方法
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.wkWebView.configuration.userContentController removeScriptMessageHandlerForName:@"messgaeOC"];
}
- (void)dealloc
{NSLog(@"dealloc:溜了溜了");
}

WKScriptMessageHandler

WKWebView收到ScriptMessage时回调此方法

// WKWebView收到ScriptMessage时回调此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    if (message.name)
    {
        // OC 层面的消息
    }
    // message == messgaeOC --- 青春气息
    NSLog(@"消息是：%@ --- %@",message.name,message.body);
}