zoukankan      html  css  js  c++  java
  • WKWebview与js交互

    应用场景:

    项目中在原有h5界面中嵌入js代码,在指定位置加入第三方分享

    此部分为js点击分享绑定部分代码,这里的事件名需要h5和前端协商好一致。

    window.webkit.messageHandlers.<事件名>.postMessage(需要传递的数据)

    iOS端

    首先需要遵循WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler三个代理方法

    WKWebViewConfiguration *wkConfig = [[WKWebViewConfiguration alloc] init];

        wkConfig.userContentController = [[WKUserContentController alloc] init];

    此处事件名与h5端js代码事件名一致

        [wkConfig.userContentController addScriptMessageHandler:self name:@"事件名"];

        self.webview = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:wkConfig];

        self.webview.backgroundColor = WXColor(240, 240, 240);

        self.webview.UIDelegate = self;

        self.webview.navigationDelegate =self;

        [self.view addSubview:self.webview];

        [self.webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL"]]];

    // 页面开始加载时调用

    - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{

    }

    // 当内容开始返回时调用

    - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{

    }

    // 页面加载完成之后调用

    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

    //此处向原h5界面注入js代码jsStr。

        [self.webview evaluateJavaScript:jsStr completionHandler:^(id _Nullable rest, NSError * _Nullable error) {

            NSLog(@"error_____%@",error);

    //如果这里提示error,则js代码中含有特殊字符如空格和换行,需要去掉。

        }];

    // 页面加载失败时调用

    - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{

    }

        

    }

    //实现js注入方法的协议方法

    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

        NSLog(@"message____%@", message);

        //找到对应js端的方法名,获取messge.body

        if ([message.name isEqualToString:@"方法名"]) {

      处理各类分享的点击事件

        }

    }

  • 相关阅读:
    springMVC 错误页面配置
    设计模式 11 —— 代理模式
    JAVA RMI 实例
    设计模式 10 —— 状态模式
    设计模式 9 —— 模板方法模式
    Java EE : 三、图解Session(会话)
    Java EE : 二、图解 Cookie(小甜饼)
    Java EE : 一、图解Http协议
    《JAVA与模式》之单例模式
    Java中如何克隆集合——ArrayList和HashSet深拷贝
  • 原文地址:https://www.cnblogs.com/FZP5/p/8611826.html
Copyright © 2011-2022 走看看