UIWebView中自定义view、图片自适应屏幕大小

最新推荐文章于 2025-07-12 10:57:17 发布

原创最新推荐文章于 2025-07-12 10:57:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

ios开发问题专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用UIWebView加载服务器下发的html字符串，并实现文字自动换行、图片自适应大小的功能。同时，演示了如何在webview的头部自定义标题栏，包括展示标题、作者、创建时间等信息。

注：本文只介绍UIWebView加载服务器下发的html字符串、对html中含有的文字进行自动换行，图片进行自适应大小

加一句，要实现在webview的head上加一个标题栏的，用来展示标题、作者、创建时间等信息。uiwebview可以查看到，它的滚动是依靠里面的的UiScrollView来进行的，所以，为了在webview上自定义一个头，只需要给UIScrollView增加偏移量。

一、定义UIWebView

@property (nonatomic, strong) UIWebView *webView;

    self.webView = [[UIWebView alloc] init];

   self.webView.frame = CGRectMake(0, 64, self.bounds.size.width,<span style="font-family: Arial, Helvetica, sans-serif;">self.bounds.size.height);  //html中含有省略号太长，导致页面左右滑动，所以拼接html，设置文章内容自动换行</span>

    NSString* tempStr = [NSString stringWithFormat:@"%@",,self.htmlString];
    [self.webView loadHTMLString:tempStr baseURL:nil];
    self.webView.backgroundColor = [UIColor clearColor];
    self.webView.delegate = self;  //UIWebViewDelegate 否则这句会报警告

#pragma mark -- webview delegate

// 只有返回yes时，才会继续加载这个请求  即如果如果是一个地址链接的话，就不需要加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
{
    if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
        [[UIApplication sharedApplication] openURL:[request URL]];
        return NO;
    }
    return YES;
}

//在页面加载完成时，图片进行自适应
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* jsString = [NSString stringWithFormat:@"var script = document.createElement('script');"
                          "script.type = 'text/javascript';"
                          "script.text = \"function ResizeImages() { "
                          "var myimg,oldwidth;"
                          "for(i=0;i <document.images.length;i++){"
                          "myimg = document.images[i];"
                          "myimg.setAttribute('style','max-width:%f;height:auto')"
                          "}"
                          "}\";"
                          "document.getElementsByTagName('head')[0].appendChild(script);",SCREEN_WIDTH - 20];
    
    
    //图片自适应
    [webView stringByEvaluatingJavaScriptFromString:jsString];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
    [self.view addSubview:self.webView];
    [bee.ui.appBoard dismissTips];
}

//加载失败调用的函数
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
}