How to Open Safari from a Webapp in iOS 7

How to open Safari from a WebApp in iOS 7

Having an anchor tag with target _blankwill work in iOS 7.0.3 but using window.open will not work and will remain to open within the webview in 7.0.3:

window.open('http://www.google.com/', '_blank');

Open a link from web app to new Safari window in iOS 8

I found the answer! From here https://gist.github.com/kylebarrow/1042026

This script in the head

<script>
// Mobile Safari in standalone mode
if(("standalone" in window.navigator) && window.navigator.standalone){

    // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
    var noddy, remotes = false;

    document.addEventListener('click', function(event) {

        noddy = event.target;

        // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
        while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
            noddy = noddy.parentNode;
        }

        if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
        {
            event.preventDefault();
            document.location.href = noddy.href;
        }

    },false);
}
</script>

and standard HTML for the links

<a href="http://extneral" target="_blank">your link</a>

This way local links under the web apps still open in the same window, but the external http:// links will open in Safari

How can I create an iOS webapp that returns to the previous state after being inactive?

You'll need to locally store the current status of the page every time it changes (in a cookie, LocalStorage, or IndexedDB), and read that value back when the app is opened.

Web app frameworks probably have this built-in, but here's a rough and basic standalone example, using LocalStorage:

function pageChange(href) {
    // called when a new page is requested by the user
    // (could be set to run whenever an 'a' element is clicked)
    localStorage.setItem('last_href', href);
    window.location.href = href;
}

function startUp() {
    // runs when the web app starts up
    var last_href = localStorage.getItem('last_href');
    if (typeof last_href == "string" && last_href.length) {
        // check that last_href is actually stored
        // or it won't work the first time the web app is launched
        window.location.href = last_href;
    }
}

Website saved to homescreen (ios) force open in safari

I believe the web app will always open in Safari, but you can change the behavior of how it opens so it might not feel like it's opening in Safari. Check out these page on how to use some apple-specific meta tags:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

https://code.tutsplus.com/tutorials/configuring-an-iphone-web-app-with-meta-tags--mobile-2133

---

Related Topics