ios webview实现搜索并滚动到相应位置

上一篇介绍了怎么实现在webview中实现高亮关键字。

接着上次的demo.来实现高亮之后并滚动到相应的位置。

直接上代码的图片了 ,这样看的更加清晰一点:


ios webview实现搜索并滚动到相应位置_第1张图片
实现高亮并记录关键字位置到数组中

keywordBox是我们记录被我们替换掉得关键字的信息。不知道什么情况有时会出现一些空的数据,

可以通过span.offsetTop来剔除掉。(仔细看代码会发现,我们数组中的关键字是从后到前的,及最后一个关键字在数组的第一位)。



ios webview实现搜索并滚动到相应位置_第2张图片

getPosition实现了target的滚动。-60是我这边的一个需求,可以不减。我们在ios端记录点击的次数,对应点击的Num来实现滚动到数组中对应keyword;将keyword总数返回给ios端,当点击次数超过总数时重新设置为0,回到第一个位置!


ios webview实现搜索并滚动到相应位置_第3张图片
ios端相关代码

很简单 ,就不做介绍了。

如果你的webview还要支持进一步的跳转(goForward),那你需要注意js文件的调取位置了,开始我没注意从第一个网页跳转到另外一个网页后死活都不再进Js代码中了,后来发现调取js位置是有要求的。上代码

- (void)webViewDidFinishLoad:(UIWebView*)webView{

self.subBack.enabled=self.documentWeb.canGoBack;

self.subForward.enabled=self.documentWeb.canGoForward;

//[self.subBack setBackgroundImage:[UIImage imageNamed:@"return"] forState:UIControlStateNormal];

NSString*filePath = [[NSBundlemainBundle]pathForResource:@"keywordSearch"ofType:@"js"];

NSString*jsString = [[NSStringalloc]initWithContentsOfFile:filePathencoding:NSUTF8StringEncodingerror:nil];

[self.documentWebstringByEvaluatingJavaScriptFromString:jsString];

}


好了,滚动的功能也实现了。

效果图:


ios webview实现搜索并滚动到相应位置_第4张图片
实现的还是可以接受的

好了,这次的网页功能基本实现了。

希望可以帮到你!

best wishes!

你可能感兴趣的:(ios webview实现搜索并滚动到相应位置)