iOS UIwebview关于图片文字的简单js交互

最新推荐文章于 2020-04-09 16:03:27 发布

转载最新推荐文章于 2020-04-09 16:03:27 发布 · 486 阅读

文章标签：

#UIwebview #js交互

UI 同时被 2 个专栏收录

26 篇文章

订阅专栏

网络

13 篇文章

订阅专栏

本文介绍如何使用UIWebView实现图片等比缩放、调整字体大小、颜色及背景色，并监听点击图片事件实现全屏预览。

1.实现webView上图片的等比缩放。

//在webview加载完成时调用
[webView stringByEvaluatingJavaScriptFromString:
     @"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function ResizeImages() { "
     "var myimg,oldwidth;"
     "var maxwidth = 300.0;" // UIWebView中显示的图片宽度
     "for(i=0;i <document.images.length;i++){"
     "myimg = document.images[i];"
     "if(myimg.width > maxwidth){"
     "oldwidth = myimg.width;"
     "myimg.width = maxwidth;"
     "}"
     "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();”];

注意：一定要再webView加载完成的时候调用，如果你一定要一开始的显示调用后的界面你也可以再webView加载的时候将webView隐藏，登调用完之后在显示就行了。

2.改变webView的字体大小，字体颜色，背景颜色等

    //字体大小

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '330%'"];

    //字体颜色

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'gray'"];

    //页面背景色

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#2E2E2E'"];

注意：这个也要在webView加载完成的时候调用。

3.webView监听点击图片事件

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    if ([request.URL.scheme isEqualToString:@"image-preview"]) {

        NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];

        path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//path就是我们点击图片后得到的图片URL，然后你可以在这里做你点击之后要执行的代码

        return NO;

    }

    return YES;

}

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

    [webView stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0;i<length;i++){img=imgs[i];img.onclick=function(){window.location.href='image-preview:'+this.src}}}"];

    [webView stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];

}