When you visit some web site like Google Reader or Delicious at iPhone Safari, maybe you will notice that after have loaded page, the browser will hide tool bar automatically. This feature can save phone’s valuable screen space. To implement it we can just use javascript: window.scrollTo(0,1). See here, and here.
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
In common sense, it works. But if it didn’t, this article will help you.
First if we want toolbar hidden, beside the above JavaScript, below two conditions should be true:
1) web page is long enough. If it is short, the browser will think it is not necessary to hide the bar. You can zoom the page to test this rule.
2) scrollTo after page updated. setTimeout is used for this. We often invoke an AJAX to get HTML text from server and then update some part of page. The updating action will reload page so window.scrollTo must be invoked after AJAX has gotten response and page has been updated. So the timeout of scrollTo should be bigger than timeout of Ajax. Or invoke scrollTo after had gotten response directly. Keep in mind that setTimeout and Ajax both are asynchronous. I used jQuery and $(#id).html(“<div>…”); to update page, so for DRY, I override this function:
if (navigator.userAgent.indexOf('iPhone') != -1) {
(function ($) {
var originalVal = $.fn.html;
var hideURLbar = function() {window.scrollTo(0,1);};
$.fn.html = function(value) {
var ret = originalVal.call(this, value);
if (typeof value != 'undefined') {
// setter invoked, do processing
setTimeout(hideURLbar, 100);
}
return ret;
};
})(jQuery);
};
I found this cool script from here. Mabye this approach impacts app much, for html method is used everywhere in app. So take care before apply it. There is another option: use $(document).trigger to sent event.
