在应用开发中，常常会嵌入HTML5界面，一般的需求都是直接使用WebView的代理方法做跳转操作。但是有时候我们需要操作HTML5界面的时候该怎么办呢？
比如: 修改百度首页的搜索按钮，修改他的点击事件...效果图如下
代码示例
DOM操作前先加载百度界面
- (void)viewDidLoad
{
[super viewDidLoad];
self.webView.delegate = self;
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
}
DOM操作均在代理方法- (void)webViewDidFinishLoad:(UIWebView *)webView中实现
第一步：获取网页body并输出查看为了后续查找相应对象的id或者class
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *bodyString = @"document.body.outerHTML";
NSString *body = [webView stringByEvaluatingJavaScriptFromString:bodyString];
NSLog(@"%@",body);
}
第二步：找到相应对象
- 通过id获取
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *btn = @"var btn = document.getElementById('index-bn');" ;
[webView stringByEvaluatingJavaScriptFromString:btn];
}
- 通过class获取
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *button = @"var change = document.getElementsByClassName('change')[0];"
[webView stringByEvaluatingJavaScriptFromString:button];*/
}
**第三步： **更改对象属性文字、大小、背景颜色、点击事件
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *attr = @ "btn.innerHTML = '我也想百度一下';"
"btn.style.height = '200px';"
"btn.style.background = 'black';"
"btn.onclick = function(){location.href = 'lyon://name_number_?&10086';}";
//"btn.addEventListener('click',function(){location.href = 'lyon://name_number_?&10086';})";
[webView stringByEvaluatingJavaScriptFromString:attr];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSLog(@"%@",request.URL);
return YES;
}
第四步：删除对象
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *remove = @"btn.remove();";
[webView stringByEvaluatingJavaScriptFromString:remove];
}
第五步：插入对象
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *str4 =@"var img = document.createElement('img');"
"img.src = 'img_01.jpg';"
"img.width = '160';"
"img.height = '200';"
"document.body.appendChild(img);";
[webView stringByEvaluatingJavaScriptFromString:str4];
}
完整代码示例
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//第一步：获取网页body并输出查看`为了后续查找相应对象的id或者class`
NSString *bodyString = @"document.body.outerHTML";
NSString *body = [webView stringByEvaluatingJavaScriptFromString:bodyString];
NSLog(@"%@",body);
// 第二部：找到body所有修改元素的id或者class等
// 获取对象:使用id
NSString *btn = @"var btn = document.getElementById('index-bn');"
;
// 获取对象:使用class
// NSString *str3 = @"var change = document.getElementsByClassName('change')[0];"
[webView stringByEvaluatingJavaScriptFromString:btn];
// 更改属性文字、大小、背景颜色、更改点击事件
NSString *attr = @ "btn.innerHTML = '我也想百度一下';"
"btn.style.height = '200px';"
"btn.style.background = 'black';"
"btn.onclick = function(){location.href = 'lyon://name_number_?&10086';}";
[webView stringByEvaluatingJavaScriptFromString:attr];
// 删除
NSString *remove = @"btn.remove();";
[webView stringByEvaluatingJavaScriptFromString:remove];
// 插入
NSString *str4 =@"var img = document.createElement('img');"
"img.src = 'img_01.jpg';"
"img.width = '160';"
"img.height = '200';"
"document.body.appendChild(img);";
[webView stringByEvaluatingJavaScriptFromString:str4];*/
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSLog(@"%@",request.URL);
return YES;
}
@end
