IOS OC向h5注入JS代码，知道h5的页面按钮ID，向该按钮添加点击事件

最新推荐文章于 2025-05-08 22:48:35 发布

原创最新推荐文章于 2025-05-08 22:48:35 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#IOS开发 #OC和H5 #OC和js交互

IOS开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用WKWebView修改Markdown编辑器，通过编写代码实现自定义功能，提升博客写作体验。详细展示了从创建WKWebView对象、加载自定义JS文件到注入JS代码并实现与Objective-C交互的过程，最终接收JS执行事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎使用Markdown编辑器写博客

本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

使用WKwebVIew，创建这个对象，代码如下
** WKUserScript *script = [[WKUserScript alloc]initWithSource:@”” injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
[config.userContentController addUserScript:script];

WKWebView *web = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];
web.backgroundColor = [UIColor yellowColor];
web.navigationDelegate = self;
web.UIDelegate = self;
self.webView = web;
[self.view addSubview:web];

NSString *filrStr = [[NSBundle mainBundle] pathForResource:@”js” ofType:@”html”];
NSURL *url = [NSURL fileURLWithPath:filrStr];
[web loadFileURL:url allowingReadAccessToURL:url];
[[web configuration].userContentController addScriptMessageHandler:self name:@”jsCallOC”];**
在网页加载完成后调用这个回调函数，并在里面注入JS代码
/* 网页加载完成 /
-(void)webView:(WKWebView )webView didFinishNavigation:(WKNavigation )navigation{
// NSString *butValueJS = @”document.getElementById(‘buttonJS’).innerText”;

NSString *butValueJS =
@”var button = document.getElementById(‘buttonJS’);button.onclick=function getImages(){window.webkit.messageHandlers.jsCallOC.postMessage({body: ‘goodsId=1212’});}”;

[webView evaluateJavaScript:butValueJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {
}];
}
下面是截图
/* 接收JS中方法执行事件。 /
-(void)userContentController:(WKUserContentController )userContentController didReceiveScriptMessage:(WKScriptMessage )message{
NSLog(@”message.body == %@”,message.name);

[self JCtoOC:message];
}
-(void)JCtoOC:(id)body{
NSLog(@”js调用我的..”);
}
最后在这里接收JS执行的事件