Question

I'm trying to make my site a web app. The first time i watched it all the links opend in the safari browser. after adding a script to the site that whas no longer a problem. This is the script:

if(("standalone" in window.navigator) && window.navigator.standalone){
    $(document).on('click', 'a', function(e) {
        if ($(this).attr('target') !== '_blank') {
            e.preventDefault();
            window.location = $(this).attr('href');
        }
    });
}

only all links with 'rel="external"' stay in the web app. also if i set them to target"_blank".

i thought: what if i have a script that looks for the rel="external file". editing the above script doesn't work.

so what i want is a script that tests on the rel=external element. if it finds it the link stays untoucht and if it doesn't find the rel=external in the link it does someting like:

e.preventDefault();
window.location = $(this).attr('href');
Was it helpful?

Solution 2

How about this?

if(! $(this).is('[rel="external"]') ) {
    e.preventDefault();
    window.location = $(this).attr('href');
} else {
    window.open( $(this).attr('href') ); //opens a new window
}

EDITED: added an else condition that would cause linkes with rel="external" to open in a new window.

OTHER TIPS

To open an external browser window when in web app (Standalone) You need to use _system in the window.open function. Also on iPhone Safari has a bug that does not repaint the parent window correctly when closing the newly opened window.

var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
$('html, body').animate({scrollTop: 0});
window.open(encodeURI(url),"_system",windowOpenSettings);
$('html, body').animate({scrollTop: top});
return;

All the scrolling is just to repaint IOS window and to place the user back in the same position as before the click.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top