iOSでWebViewの高さを正確に計算する方法の例

3751 ワード

ios webview 高さ

前言
appを開発する過程で、webViewをtablewのcellにロードする需要があります。一般的にこのような問題が発生します。webViewの戻り方webView DidFinish LoadでwebViewの高さを更新し、tablewに高さを付与する方法です。何の問題もないように見えますが、実際に操作してみたら、得られた高さはwebViewの実際の高さではなく、明らかにこの方法は通用しません。実際には方法がだめではなく、webView DidFinish Loadの代理方法が呼び出された時、ページは必ずしも完全に完成されていないかもしれません。画像はまだ読み込まれていないかもしれません。この時の高度は最終高度ではなく、後で画像を読み込んだら、ブラウザは再レイアウトされます。この方法が通用しないなら、どうやってwebViewの高さを正確に計算することができますか？
答えは傍受で、具体的な実現過程は以下の通りです。
webViewのscrollViewのcontentSize属性に傍受を追加し、内容が変化するたびに、contentSizeは必ず変化します。この変動をキャプチャして、傍受方法でwebView DidFinish Loadのコードを実現します。つまり最新のコンテンツ高度を取得してwebViewに与えられます。


//    
[_WebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:@"WejinWuLiuViewController"];


//    
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
 
 if ([keyPath isEqualToString:@"contentSize"]) {
 
 _webViewHeight = [_WebView.scrollView contentSize].height;
 CGRect newFrame = _WebView.frame;
 newFrame.size.height = _webViewHeight;
 _WebView.frame = newFrame;
 }
}

iOS開発の解決WebView適応内容の高さ
まず、直接にコンテンツ展示を行ったり、size ToFitの操作をしたりすると、画像がスクリーンサイズを超えてフォントが小さくなる結果になりますので、ここでUnibViewのdelegate方法とhtmlタグ言語を使って、javascriptの操作方法を使いました。具体的にコードを調べることができます。


//web 
-(UIWebView *)detailWebView 
{ 
if (_detailWebView == nil) { 
_detailWebView = [UIWebView new]; 
_detailWebView.delegate = self; 
_detailWebView.scrollView.bounces = NO; 
_detailWebView.scrollView.showsHorizontalScrollIndicator = NO; 
_detailWebView.scrollView.scrollEnabled = NO; 
_detailWebView.dataDetectorTypes = UIDataDetectorTypeAll; 
[_detailWebView sizeToFit]; 
} 
return _detailWebView; 
}


NSString *htmlcontent = [NSString stringWithFormat:@"<head><style>img{max-width:%fpx !important;}</style></head><div id=\"webview_content_wrapper\">%@</div>",f_Device_w-30,detailDic[@"content"]]; 

[_detailWebView loadHTMLString:htmlcontent baseURL:nil];


#pragma mark ----- webView   delegate 
- (void)webViewDidFinishLoad:(UIWebView *)webView 
{ 
//      （  ） 
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]; 
float clientheight = [clientheight_str floatValue]; 
//   WebView  
webView.frame = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, clientheight); 

//                   ，            
//        （  ） 
NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top')) + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"]; 
float height = [height_str floatValue]; 

//    WebView  （ ） 
webView.frame = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, height); 

if ([self.delegate respondsToSelector:@selector(backWebViewWithHeight:)]) { 
[self.delegate backWebViewWithHeight:webView.bottom+5]; 
} 
}

コードは私のプロジェクトで使うものです。使う必要はありません。みんな自分の必要に応じて修正できます。必要なコードは全部あります。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。

SPANとDIVの違いを把握してください。

JS配列方法reduceの用法例分析