Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adjust height of WKWebView frame based on scrollHeight of the webView's content
// Since the WKWebView has no sizeToFit() method, increase the frame height of the webView to
// match the height of the content's scrollHeight
//
// The WKWebView's `navigationDelegate` property needs to be set for the delegate method to be called
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
if webView.isLoading == false {
webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { [weak self] (result, error) in
if let height = result as? CGFloat {
webView.frame.size.height += height
}
})
}
}
@yunchiri

This comment has been minimized.

Copy link

@yunchiri yunchiri commented Mar 16, 2018

Thanks!!

@hlung

This comment has been minimized.

Copy link

@hlung hlung commented Apr 17, 2018

Nice! For me, instead of setting the webView.frame, I set autolayout intrinsicContentSize.

import UIKit
import WebKit

class ArticleWebView: WKWebView {

  init(frame: CGRect) {
    let configuration = WKWebViewConfiguration()
    super.init(frame: frame, configuration: configuration)
    self.navigationDelegate = self
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override var intrinsicContentSize: CGSize {
    return self.scrollView.contentSize
  }

}

extension ArticleWebView: WKNavigationDelegate {

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.readyState", completionHandler: { (_, _) in
      webView.invalidateIntrinsicContentSize()
    })
  }

}

@neugierige

This comment has been minimized.

Copy link

@neugierige neugierige commented Jul 16, 2018

I'm getting back a height value that is way bigger than the actual size of my content. Any ideas why that might be happening?

@NSAmit

This comment has been minimized.

Copy link

@NSAmit NSAmit commented Sep 24, 2018

Me too getting way bigger height than the actual content.

@k-marin

This comment has been minimized.

Copy link

@k-marin k-marin commented Nov 25, 2018

initalize your webview with configuration and inject the viewport meta tag

func webViewConfiguration() -> WKWebViewConfiguration {
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController()
return configuration
}

private func userContentController() -> WKUserContentController {
    let controller = WKUserContentController()
    controller.addUserScript(viewPortScript())
    return controller
}


private func viewPortScript() -> WKUserScript {
    let viewPortScript = """
        var meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width');
        meta.setAttribute('initial-scale', '1.0');
        meta.setAttribute('maximum-scale', '1.0');
        meta.setAttribute('minimum-scale', '1.0');
        meta.setAttribute('user-scalable', 'no');
        document.getElementsByTagName('head')[0].appendChild(meta);
    """
    return WKUserScript(source: viewPortScript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
}
@ShivamPokhriyal

This comment has been minimized.

Copy link

@ShivamPokhriyal ShivamPokhriyal commented Mar 1, 2019

@neugierige @NSAmit Did you manage to get actual height? I too am getting bigger height value.

@LGFox

This comment has been minimized.

Copy link

@LGFox LGFox commented Apr 4, 2019

@ShivamPokhriyal, If you get too big value - try to add tag as @k-marin proposed above. That works for me.

@Dee-R

This comment has been minimized.

Copy link

@Dee-R Dee-R commented Jul 5, 2019

thx

@ARIFCSE10

This comment has been minimized.

Copy link

@ARIFCSE10 ARIFCSE10 commented Aug 8, 2019

how to get actual height if I have to set initial scale to other than 1 ?

@anandabayu

This comment has been minimized.

Copy link

@anandabayu anandabayu commented Jan 8, 2020

thanks

@gvsharma

This comment has been minimized.

Copy link

@gvsharma gvsharma commented Jan 24, 2020

Really helpful thanks

@emilyvon

This comment has been minimized.

Copy link

@emilyvon emilyvon commented Feb 11, 2020

This is exactly what I'm looking for, thank you :]

@josipbernat

This comment has been minimized.

Copy link

@josipbernat josipbernat commented Mar 25, 2020

If someone needs it, here is ObjC version of viewport meta tag injection.

- (WKUserContentController *)userContentController {
    WKUserContentController *controller = [[WKUserContentController alloc] init];
    [controller addUserScript:[self userScript]];
    return controller;
}

- (WKUserScript *)userScript {

    NSString *viewPortScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, shrink-to-fit=YES'); meta.setAttribute('initial-scale', '1.0'); meta.setAttribute('maximum-scale', '1.0'); meta.setAttribute('minimum-scale', '1.0'); meta.setAttribute('user-scalable', 'no'); document.getElementsByTagName('head')[0].appendChild(meta);";

    return [[WKUserScript alloc] initWithSource:viewPortScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
}
@mogelbuster

This comment has been minimized.

Copy link

@mogelbuster mogelbuster commented Apr 23, 2020

If you're using loadHTMLString(_:baseURL:) method on WKWebView to display your content and getting way too big of a height value, a possibly simpler fix than using javascript to inject the viewport meta tag is to just include it right at the beginning of the html string. This was all I needed:

"<meta name='viewport' content='width=device-width, shrink-to-fit=YES'>"

But if that doesn't work, you could always try the full string from above:

"<meta name='viewport' content='width=device-width, shrink-to-fit=YES' initial-scale='1.0' maximum-scale='1.0' minimum-scale='1.0' user-scalable='no'>"

My html string didn't have a head tag, so I just put it at the very beginning. But if your string does have a head tag, then put this meta tag in there.

@pallavi10aggarwal

This comment has been minimized.

Copy link

@pallavi10aggarwal pallavi10aggarwal commented Aug 27, 2020

@mogelbuster I am using loadHTMLString(_:baseURL:) method on WKWebView to display my content and getting way too big of a height value , I tried @k-marvin and ur solutions but no luck , kindly suggest

@standinga

This comment has been minimized.

Copy link

@standinga standinga commented Feb 23, 2021

I was also getting height too big inside the UITableViewCells, the suggested solutions didn't work consistently. In my case querying specific div instead of the whole body seems to work fine.
webView.evaluateJavaScript("document.getElementById('publication').scrollHeight") { height, error in ... }
Where my top

element has id='publication'

@titopalito

This comment has been minimized.

Copy link

@titopalito titopalito commented Feb 25, 2021

thanks! 👯

@ruisantos78

This comment has been minimized.

Copy link

@ruisantos78 ruisantos78 commented Mar 27, 2021

The problem for me was the document.body.width, even if meta tag still very small...
So I fix running a script before:
document.body.style.width = '{width}px'

when width it's the current resolution of my device screen...

after than, when I call the "document.body.scrollHeight" works like a charm...

I use Xamarin by the way...

  public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation) {
        if (renderer?.Element is WebListItemView view)
        {
            webView.EvaluateJavaScript("document.readyState", async (completed, error) =>
            {
                if (completed is null) return;
  
                await webView.EvaluateJavaScriptAsync($"document.body.style.width = '{view.Width}px'");
                var offsetHeight = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight");
                if (offsetHeight is Foundation.NSNumber height)
                {
                    view.HeightRequest = height.DoubleValue;
  
                    if (view.Parent is ViewCell cell) cell.ForceUpdateSize();
                }
            });
        }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment