iPhone Safari Web App opens links in new window

Question

I have problem with web after adding icon to Home Screen  If the web is launched from Home Screen  all links will open in new window in Safari  and lose full screen functionality   How can I prevent it  I couldn t find any help  only the same unanswered question

User · Accepted Answer

I found JavaScript solution in iWebKit framework   var a document getElementsByTagName  a    for var i 0 i lt a length i          a i  onclick function                 window location this getAttribute  href            return false

User · Answer

The other solutions here either don t account for external links  that you probably want to open externally in Safari  or don t account for relative links  without the domain in them    The html5 mobile-boilerplate project links to this gist which has a good discussion on the topic  https   gist github com 1042026  Here s the final code they came up with    lt script gt  function a b c  if c in b amp  amp b c   var d e a location f    a html   i a addEventListener  click  function a  d a target while  f test d nodeName  d d parentNode  href in d amp  amp  d href indexOf  http     d href indexOf e host   amp  amp  a preventDefault   e href d href    1     document window navigator  standalone   lt  script gt

User · Answer

I prefer to open all links inside the standalone web app mode except ones that have target   blank   Using jQuery  of course     document  on  click    a   function e        if    this  attr  target         blank             e preventDefault            window location     this  attr  href

User · Answer

This is slightly adapted version of Sean s which was preventing back button     this function makes anchor tags work properly on an iphone    document  ready function    if    standalone  in window navigator   amp  amp  window navigator standalone         For iOS Apps      a   on  click   function e        var new location     this  attr  href        if  new location    undefined  amp  amp  new location substr 0  1          amp  amp  new location      amp  amp    this  attr  data-method      undefined         e preventDefault          window location   new location

User · Answer

I ve found one that is very complete and efficient because it checks to be running only under standalone WebApp  works without jQuery and is also straightforward  just tested under iOS 8 2    Stay Standalone  Prevent links in standalone web apps opening Mobile Safari

User · Answer

One workaround i used for an iOS web app was that I made all links  which were buttons by CSS  form submit buttons  So I opened a form which posted to the destination link  then input type  submit  Not the best way  but it s what I figured out before I found this page

User · Answer

I created a bower installable package out of  rmarscher s answer which can be found here   http   github com stylr iosweblinks  You can easily install the snippet with bower using bower install --save iosweblinks

User · Answer

Based on Davids answer and Richards comment  you should perform a domain check  Otherwise links to other websites will also opened in your web app      a   live  click   function  event              var href     this  attr  href         if  href indexOf location hostname   gt  -1                event preventDefault            window location   href

User · Answer

This is working for me on iOS 6 1 and with Bootstrap JS links  i e dropdown menus etc     document  ready function        if    standalone  in window navigator   amp  amp  window navigator standalone                 For iOS Apps              a   on  click   function e                 e preventDefault                  var new location     this  attr  href                  if  new location    undefined  amp  amp  new location substr 0  1          amp  amp    this  attr  data-method      undefined                     window location   new location

User · Answer

Here is what I d use for all links on a page     document body addEventListener function event        if  event target href  amp  amp  event target target      blank             event preventDefault            window location   this href                              If you re using jQuery or Zepto        body   on  click    a   function event       event target target      blank   amp  amp   window location   event target href

User · Answer

For those with Twitter Bootstrap and Rails 3      a   live  click   function  event      if     this  attr  data-method     delete         var href     this  attr  href        event preventDefault        window location   href                Delete links are still working this way

User · Answer

You can also do linking almost normally    lt a href     onclick  window location  URL TO GO    gt TEXT OF THE LINK lt  a gt    And you can remove the hash tag and href  everything it does it affects appearance

User · Answer

Maybe you should allow to open links in new window when target is explicitly set to   blank  as well       a   live  click   function  event              var href     this  attr  href            prevent internal links  href indexOf     to open in safari if target        is not explicitly set blank  doesn t break href     links     if  href indexOf location hostname   gt  -1  amp  amp  href         amp  amp    this  attr  target        blank                 event preventDefault            window location   href

User · Answer

If you are using jQuery  you can do      a   click function  event        event preventDefault        window location     this  attr  href

User · Answer

This code works for iOS 5  it worked for me    In the head tag    lt script type  text javascript  gt      function OpenLink theLink           window location href   theLink href         lt  script gt    In the link that you want to be opened in the same window    lt a href   your website here   onclick  OpenLink this   return false  gt  Link  lt  a gt    I got this code from this comment  iphone web app meta tags

User · Answer

For those using JQuery Mobile  the above solutions break popup dialog  This will keep links within webapp and allow for popups      document  on  click   a   function  event        if   this  attr  href   indexOf         0            return true            event preventDefault        window location     this  attr  href               Could also do it by     document  on  click   a   function  event       if   this  attr  data-rel       popup            return true            event preventDefault        window location     this  attr  href

User · Answer

This is what worked for me on iOS 6  very slight adaptation of rmarscher s answer     lt script gt                                                                       function document navigator standalone                                      if  standalone in navigator  amp  amp  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                                                                                                                    if   href  in curnode  amp  amp   curnode href indexOf  http       curnode href indexOf location host    amp  amp  curnode target    false                        e preventDefault                                                         location href curnode href                                                                                                                  false                                                                                                                                      document window navigator  standalone                              lt  script gt

User · Answer

If using jQuery Mobile you will experience the new window when using the data-ajax  false  attribute  In fact  this will happen whenever ajaxEnabled is turned off  being by and external link  by a   mobile ajaxEnabled setting or by having a target    attribute   You may fix it using this      a data-ajax  false     live  click   function event     if  this href        event preventDefault        location href this href      return false             Thanks to Richard Poole for the live   method - wasn t working with bind     If you ve turned ajaxEnabled off globally  you will need to drop the  data-ajax  false     This took me rather long to figure out as I was expecting it to be a jQuery Mobile specific problem where in fact it was the Ajax linking that actually prohibited the new window

User · Answer

This is an old question and many of the solutions here are using javascript  Since then  iOS 11 3 has been released and you can now use the scope member  The scope member is a URL like     where all paths under that scope will not open a new page       The scope member is a string that represents the navigation scope of   this web application s application context    Here is my example         name    Test      short name    Test      lang    en-US      start url           scope                  You can also read more about it here  I also recommend using the generator which will provide this functionality       If you specify the scope  everything works as expected similar to   Android  destinations out of the scope will open in Safari     with a   back button  the small one in the status bar  to your PWA

User · Answer

You can simply remove this meta tag    lt meta name  apple-mobile-web-app-capable  content  yes  gt

[iphone] iPhone Safari Web App opens links in new window

Examples related to iphone

Examples related to safari

Examples related to iphone-standalone-web-app