All geek questions in one place

Prevent offline iphone webapp from opening links in Safari

I am developing a website that will work with mobile safari offline. I can mark it on the main screen and load it from there. But after opening from the main screen, clicking on certain links will jump out of the application and open in mobile safari - despite the fact that I prevented Default () in all clicks on the links!

The application binds the onclick event handler at the level <body>. Using event delegation, he catches any click on any link, looks at its href (for example, "help" or "review") and dynamically calls the javascript template and refreshes the pages. The event handler calls preventDefault () on the event object - for some links this works, and the page refreshes with the output of the template. However, for links that result in a hit on the local database before displaying the results of the template, the links open in mobile safari.

In a desktop safari, all links work even when I'm offline - something happens, this is specific to mobile safaris.

Any thoughts on why some links will work offline, but not others? None of the referenced URLs are listed in the manifest file, but they should not (should not) be, because the link's action has been prevented.

A couple of additional oddities: * As soon as I click on the link downloaded to the mobile safari, even if I'm online, the same links now work, and templates filled with data from db work correctly. in other words: the links do not work when opened from the main screen, but not from the mobile Safari offline * changing the link to delete the remote database (filling out the template using the result of mock db) solves the problem, and you can click the links from the main screen in the application.

+3
2

: https://gist.github.com/1042026

// by https://github.com/irae
(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 && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                e.preventDefault();
                location.href = curnode.href;
            }
        },false);
    }
})(document,window.navigator,'standalone');
+5

, ​​ ( ). body preventDefault(), , , URL-,

, preventDefault() , - - , , preventDefault(), , , , .

, ( DOM IE):

bodyOnClickHandler = function(e) {
    var target = e.target;
    if (target.tagName == 'A') {
        e.preventDefault();
        var targetUrl = target.getAttribute("href");
        //show the page for targetUrl
    }
}
+2

Source: https://habr.com/ru/post/1726137/

More articles:


All Articles