I've spent most the day adding the mobile-web-app-capable into my site. All now works - links stay in the app and do not open in safari, the page with youtube embedded video now opens BUT the FAQ page division jump links still open in safari... the only ones that do now.
I've used the code below.
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if(
'href' in curnode && // is a link
(chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
( !(/^[a-z+.-]+:/i).test(chref) || // either does not have a proper scheme (relative links)
chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
</script>
My jump link code is:
<span class="faq-link"><a href="#faq-1">Where are...?</a></span>
As soon as you click the question at the top Safari opens.
TIA for your help.
Whilst this question was asked seven years ago, I see it has a lot of views. Indeed I found it myself looking for a solution to linked pages of the same site opening in Safari instead of the app.
Rather than use the JavaScript function in the original question I found the solution that worked for me was to include a link to a manifest file in the page header, and add a basic manifest file.
The manifest file looked like this...
This will not solve the issue for external links however.