在應用開發中，常常會嵌入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
