Using Links in iOS Fullscreen Web Apps
I'm working on a quick landing page to access a number of small, mobile-optimized applications on the same server. Basically the Dashboard pattern. I want to have it on my home screen so that I can get to any of the apps in fullscreen mode rather than in toolbar-heavy mobile Safari. However, when I click on a link, it takes me out of the fulls开发者_开发技巧creen mode into Safari -- exactly what I don't want.
Is there a way (e.g. using an anchor's target
attribute) to stay in the fullscreen mode while navigating to a different page? Or should I just throw everything into an <iframe>
?
You'll need to intercept the onclick
event using some javascript. For example, here's what iWebKit does with the noeffect
css class applied to an <a>
tag:
window.onload = function () {
function fullscreen() {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length;i++) {
if (a[i].className.match("noeffect")) {
// Does nothing
}
else {
a[i].onclick = function () {
window.location = this.getAttribute("href");
return false;
};
}
}
}
};
Whenever an onclick
occurs in mobile Safari, Safari will take it out of fullscreen mode. Form submissions will remain in fullscreen mode, whether POST
or GET
. If window.location
is set via javascript, it will also remain in fullscreen mode.
I prefer delegation to setting an event handler on each anchor. Here's a jQuery example:
$(window).click(handleClick);
function handleClick(e) {
var target = $(e.target).closest('a');
if( target ) {
e.preventDefault();
window.location = target.attr('href');
}
}
精彩评论