rel="external" won't work in Fullscreen Iphone WebApp

[masterluke]

Hi folks..

I have a Prblem with my WebApp ( follow link: http://media-owl.de/salzstreuner/ )
When i install this WebApp to my Homescreen and then load it, the WebApp open in Fullscreen-Mode like a Native App. Everything working fine ... But when i click on the Facebook Icon, the link open in the same window but i want to have the link open a blank New window with Status bar etc.. If i call the site direct from Iphone Safari, everything looks good.. How can i solve this Problem?

Greetz Masterluke

[toddparker]

Maybe this is the default behavior of mobile safari in fullscreen mode? Can you do a test where you make a basic page (not using jQuery Mobile) with link that has a target="foo". Open this in fullscreen mode and see what happens. Does it launch Safari? Seems like a fullscreen web view wouldn't open it in that mode because there's no windows management in fullscreen mode.

[umbrae]

I have this exact same issue. Masterluke, have you found a solution? I noticed your sample app still has the bug.

Things I've tried:

• using rel="external"
• using target="_blank"
• using target="_top"

I expect it's because jQuery mobile is catching the link and doing something like document.location to it, which perhaps mobile-web-app-capable doesn't catch?

[umbrae]

Just figured out a fix that involves hacking a bit on jQuery mobile (which I've had to do a decent amount of, as I've not had much luck interacting on the forums, with patches, pull requests, etc).

Essentially look for this bit of code:

        //deliberately redirect, in case click was triggered
        if( target ){
            window.open(href);
        }

And add a return, such that preventDefault never gets called:

        //deliberately redirect, in case click was triggered
        if( target ){
            window.open(href);
            return;
        }

And then links open properly in web-app-capable mode. Hope this helps.

[seanfoo]

Duplicate of #744.

[masterluke]

Hi, where can i find the Code? jquery.mobile.min.js doesn's have this inside.. I have tried to insert your code in my Sample Page but nothing happend.. Links Still open in same Window...

[scottjehl]

@umbrae: if we open the window and allow the default to return, is there a chance two windows will open?
FYI: once we fix this one https://github.com/jquery/jquery-mobile/issues#issue/240, we'll probably eliminate all of the window.open logic and either handle a link internally with ajax, or return (allowing target, etc to do its thing).

[wetcoast]

I made the following change to the click routing code in order to get rel="external" links to open in Safari Mobile when the web app is running in fullscreen mode on the iPhone, adding the 5 lines just below where isRelExternal is set in the existing 1.0a3 code:

    //rel set to external
    isRelExternal = $this.is( "[rel='external']" ),
    // hack needed to make work when in fullscreen mode on iPhone
    var inaapp = window.navigator.standalone;
    if ( isRelExternal && inaapp == true ) {
        return confirm('Leaving app. Continue?');
    }

While this seems to resolve the problem, it has raised another issue for me when the rel="external" link is used within a listview like this:

<ul data-role="listview">
...
<li><a rel="external" href="http://example.com/">external link</a></li>
...
</ul>

In this case, the external URL opens in Safari Mobile if, and only if, I touch the text in the LI button. If I miss the text and touch elsewhere in the button, then the Confirm dialog still opens as expected, but when I touch OK, the Confirm dialog closes and the URL is never opened anywhere. The same holds true if I get rid of the Confirm dialog altogether and just always return true when rel="external" and running in fullscreen mode.

[timruffles]

I just gave up and put

<li><a href="/logout" rel="external" onclick="window.location = $(this).attr('href')">Logout</a></li>

[swrobel]

Not sure if there's a better way to vote for this, but I need this functionality.

[mariozaizar]

What about this idea?

John, at September 15, 2010 at 9:33 pm:

"Dade, you can easily navigate to another page while staying in the full browser window by calling window.location.href=’http://www.yahoo.com’; in javascript." From: http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/comment-page-1/#comment-1886

It works for me:

:javascript
  // If we're running AppleWebApp mode, modify all "rel=external" to "onclick=window.location.href" and preserve just one app window.
   if ( ("standalone" in window.navigator) && window.navigator.standalone ) {
     $("a[rel*=external]").live('click', function(){
       window.location.href=this.href;
       return false;
     });
   }

[reidsguides]

I am having the exact same problem (using Dreamweaver 5.5, which incorporates PhoneGap). I want internal links to open up within the app (that works fine), but all links to other sites (e.g.: http://www.someothersite.com) to cause the mobile Safari browser to open and serve the page inside of that. I do not want them to open within the app.

I have tried everything I have found on various message boards, from the simple -- tagging the linkes rel="external" target="_blank" (and other targets), using the data=ajax="false" -- to the more complex -- tinkering with code I, frankly, do not understand and other recommendations I have found.

Like masterluke, I could not find within jquery-mobile.min,js the code snippet umbrae suggested fiddling with,
nor could I figure out where to cram wetcoast's suggested code (also, the fact that it has the bug wherein it only works for the textual part of a list object make it less than ideal).

(Ironically, my search for an answer has revealed that many people are having the exact opposite program -- they want their links to open within the app and it keeps launching Safari instead. I've even tried reverse-engineering the things they have tried to see if the answer lies there.)

Nothing has worked. Click on any link to an outside site and it, apparently, opens within the app -- in other words, it replaces my full-screen app with a full-screen version of the outside site, leaving me stranded on the external site with no way to close it or to get back into my app -- even if I close the app and open it again, it remains hung at the external site. I have to rebuild and relaunch in the emulator just to get back to my app.

For the record, I am currently only attempting this on an iPhone build right now (not even up to Android yet).

Help! Thanks.

[toddparker]

I'm not sure this is something we can/should address. In fullscreen mode, there is no browser chrome to manage multiple windows so I'm sure that's why opening a new window isn't allowed. As Scott suggested, the older way of handing links is gone so I think we're as hand-off as we can be on handling navigation.

[hayds]

I had exactly the same problem with a mobile web app I am developing and testing on iphone safari. I wanted it to be a full screen app so had to add to the head of each page and save the shortcut to the home screen of my phone to get it to work full screen. When you click a link which is external or you dont want to use ajax to load it would open an instance of safari which has the header and footer bars.

I found a workaround on the net to use javascript to change the window.location.href. Which worked but I wanted it to be handled in jquery mobile instead of writing or including a piece of random javascript on each page of my site.

So I found the following code in Jquery mobile release 1.1.0. In the code look for

// click routing - direct to HTTP or Ajax, accordingly
$( document ).bind( "click", function( event ) {

Scroll down and look for

if( isExternal ) {
httpCleanup();
//use default click handling
return;
}

Replace with

        if( isExternal ) {
            httpCleanup();
            //use default click handling
            event.preventDefault(); // prevent the browser from going there
            window.location.href=href; // Make the current window load the new page Nb
                                                                  // the href var has already been set for us above
            return;
        }

This works great for me, you might need to also change another place or 2 in jquery mobile js ie where it exits early if you disable ajax globally. Its only a few lines above the code I have already mentioned. Look for

        if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
            httpCleanup();
            //use default click handling
            return;
        }

Peace