WebView dynamic resize to content size

Question

I'm having trouble resizing a WebView element to fit its content. I don't want to resize the content, I want the WebView and its containing Custom View and NSWindow to resize to fit the content.

At the moment i've tried using JavaScript to get the width and height and resizing the 3 elements, as well as using NSRect and setFrameSize but with no luck (shown below).

So basically, if I have an NSWindow with a Custom View with a Web View, how do I get them to resize to fit the content of the WebView?

Thanks in advance everyone!

This is what I have at the moment which just makes a big mess (it doesn't resize the main window, and makes the contents of the window spill out of it).

NSString *width = [_myWebView stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth;"];
NSString *height = [_myWebView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"];

NSSize size;
size.width = [width floatValue];
size.height = [height floatValue];

NSRect mySize = NSMakeRect(_window.frame.origin.x, _window.frame.origin.y, size.width, size.height);
[_window setFrame:mySize display:YES]; // Resize main NSWindow
[_webViewView setFrameSize:size]; // Resize custom view of main NSWindow
[_myWebView setFrameSize:size]; // Resize WebView in custom view

possible duplicate of How to resize WebView according to its content? — Rob Keniger
You posted a very similar question asking exactly the same thing only 11 hours ago. I voted to close that question because it's a duplicate and now you have posted your question again. I have told you before that you should not post another question if your original question is not answered, you should start a bounty. However, in this case your question has already been answered in the question I linked as a duplicate, so just read that answer. — Rob Keniger
it's not a duplicate at all, the views and its containers are completely different, as well as the problem, as in the other post I wanted to resize the content, not the containers. Furthermore I have made many attempts of doing this and NOW have code to share to emphasize my problem. Also, the ways in which I get the width and height using JavaScript are completely different. There is NOTHING which is a duplicate at all! So please, stop following me around saying everything I write is a duplicate, so others who want to help, can. Thanks. — Cristian
The problem looks the same to me. You want to find out the size of the web view's content and resize the web view and containing window/views to fit. Have you looked at the question I linked to as a duplicate? — Rob Keniger
You obviously have not looked at the answer to the question I linked to. I wrote the answer to that other question. I marked both of your questions as duplicates of that other question. — Rob Keniger

Rob Keniger Rob Keniger · Accepted Answer · 2012-04-24T22:47:13

As far as I can tell, you have a window containing a custom view, which itself contains a web view.

You want to load content into the web view and have the frame of the web view change size to accommodate that content. You also want the containing view and window to resize accordingly.

Once you know how to resize a web view according to its content, as explained in my answer to this other question, you can then easily resize the containers accordingly.

I am going to repeat my answer here, with additions that resize the containing objects.

As noted in my other answer, you can't know ahead of time how big the content will be, and many web sites will be too big to fit on screen. You will likely need to constrain the height of your window to the screen height for this to be useful.

- (void)loadWebPage
{
    //set ourselves as the frame load delegate so we know when the window loads
    [webView setFrameLoadDelegate:self];

    //turn off scrollbars in the frame
    [[[webView mainFrame] frameView] setAllowsScrolling:NO];

    //load the page
    NSURLRequest* request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://daringfireball.net"]];
    [[webView mainFrame] loadRequest:request];
}

//called when the frame finishes loading
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)webFrame
{
    if([webFrame isEqual:[webView mainFrame]])
    {
        //get the rect for the rendered frame
        NSRect webFrameRect = [[[webFrame frameView] documentView] frame];
        //get the rect of the current webview
        NSRect webViewRect = [webView frame];

        //calculate the difference from the old frame to the new frame
        CGFloat deltaX = NSWidth(webFrameRect) - NSWidth(webViewRect);
        CGFloat deltaY = NSHeight(webFrameRect) - NSHeight(webViewRect);

        //make sure our web view and its superview resize automatically when the 
        //window resizes
        [webView setAutoresizingMask:NSViewWidthSizable | NSViewHeightSizable];
        [[webView superview] setAutoresizingMask:NSViewWidthSizable | NSViewHeightSizable];


        //set the window's frame, adjusted by our deltas

        //you should probably add some code to constrain the size of the window
        //to the screen's content size
        NSRect windowFrame = window.frame;
        [webView setFrameSize:NSMakeSize(NSWidth(window.frame) + deltaX, NSHeight(window.frame) + deltaY)];

        //turn scroll bars back on
        [[[webView mainFrame] frameView] setAllowsScrolling:YES];
    }
}

WebView dynamic resize to content size

1 Answers