iOS: Hide Certain Portion Of UIWebView

Question

In a test iOS app i have added a UIWebView that is display a webpage. What i want is not to display the header and footer of this webpage. The header and footer is let us say almost 100 pixels. Is there any way i can just hide this portion in the UIWebView?

What i have already tried is that i moved the UIWebView in my StoryBoard in such a way that the 100 pixels are behind the navigation bar. This makes the content of the UIWebView looks exactly what i want but user can still see it if he scrolls and hold and also when it bounces. So that is not a good solution to present. The second thing i have done is to disable the bounce effect but that makes the whole thing very fixed and it is also not a good solution.

How can i make it to hide the certain portion of the content at the top and at the bottom in the UIWebView? Thanks!

Answer 1

You can hide the header/footer by executing JavaScript which hides the DOM elements by CSS or just remove them after the document is loaded (in the delegate method - (void)webViewDidFinishLoad:(UIWebView *)webView ).

Say to remove the header element:

NSString *js = @"var headerElement = document.getElementsByTagName('header')[0]; if(e){ e.remove(); }";
[webView stringByEvaluatingJavaScriptFromString: js];

Or to insert CSS for hiding header/footer:

NSString *js = @"var styleTag = document.createElement('style'); styleTag.innerText = "header, footer {display: none;}"; document.body.appendChild(styleTag);";
[webView stringByEvaluatingJavaScriptFromString: js];

However, above 2 approaches take effects after the webpage is parsed and shown to the user, so user may notice the footer and header is shown for a small period of time.

If you really need to prevent user seeing the flash of header/footer, you should consider to load the html content in advanced and insert CSS into the content then show the webpage by calling UIWebView method – loadHTMLString:baseURL: .

Answer 2

Using Java Script you may achieve it. Restrict webview's scroll content offset in such a way that, it will not go up when it reaches at some point.

Or this can also be helpful to you: iOS : detect UIWebView reaching the top or bottom