Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

UPDATE 07.14.15 Losing all hope... I'm assuming my fix will be javascript related but I don't know it at all. Is my current code stopping my HTML target="Blanks" from working?

I'm making an HTML/CSS app that's downloaded on an iPad Mini. It's a simple 30+ page site with text and images. I used this javascript to make all my href's open inside the app:

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
  // For iOS Apps
  $('a').on('click', function(e){
    e.preventDefault();
    var new_location = $(this).attr('href');
    if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
      window.location = new_location;
    }
    });
    }
    });

Which is fine and great. I want the site to work in its own window, to look like a native app.

NOW I need to make this ONE link open up in Safari (it would have to open Safari and switch to that window).

target="_blank" doesn't work, or rel="external"

How do you have links that open inside a web app AND other links open in Safari?

This question How to open Safari from a WebApp in iOS 7 is similar to mine, but the fix won't work for me, and I'm in iOS 8 now.

like image 271
AnGr Avatar asked Jul 08 '15 17:07

AnGr


Video Answer


1 Answers

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

like image 149
AnGr Avatar answered Sep 30 '22 16:09

AnGr