Веб-додаток iPhone Safari відкриває посилання у новому вікні

У мене виникають проблеми з Інтернетом після додавання піктограми на головний екран. Якщо Інтернет запускається з головного екрану, всі посилання відкриються в новому вікні Safari (і втратять функцію повноекранного режиму). Як я можу це запобігти? Я не міг знайти жодної допомоги, лише те саме питання без відповіді.

Я знайшов рішення JavaScript в рамках iWebKit :

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
    a[i].onclick=function()
    {
        window.location=this.getAttribute("href");
        return false
    }
}

Інші рішення тут або не враховують зовнішніх посилань (які ви, мабуть, хочете відкрити зовнішньо в Safari), або не враховують відносних посилань (без домену в них).

Проект html5 для мобільних котлів посилається на цю суть, яка добре обговорює тему: https://gist.github.com/1042026

Ось остаточний код, який вони придумали:

<script>(function(a,b,c){if(c in b&&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&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Якщо ви використовуєте jQuery, ви можете:

$("a").click(function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});

Це працює для мене на iOS 6.1 та із посиланнями Bootstrap JS (тобто спадні меню тощо)

$(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;
        }
      });
    }
  });

Це давнє запитання, і багато з вирішень тут використовують JavaScript. З цього моменту iOS 11.3 було випущено, і тепер ви можете використовувати член області . Учасник області - це URL-адреса, подібна до того, "/"коли всі шляхи під цим діапазоном не відкриють нову сторінку.

Член області - це рядок, який представляє область навігації в контексті програми цього веб-додатка.

Ось мій приклад:

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "scope": "/",
  ...
}

Ви також можете прочитати більше про це тут . Я також рекомендую використовувати генератор, який забезпечить цю функціональність.

Якщо ви вкажете область застосування, все працює так, як очікувалося, схоже на Android, пункти призначення поза сферою дії відкриються в Safari - кнопкою "назад" (маленька у рядку стану) для вашого PWA.

На основі відповіді Девідса та коментаря Річардса слід здійснити перевірку домену. Інакше у вашому веб-додатку також відкриються посилання на інші веб-сайти.

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    if (href.indexOf(location.hostname) > -1)
    {
        event.preventDefault();
        window.location = href;
    }
});

Якщо ви використовуєте jQuery Mobile, ви побачите нове вікно під час використання атрибута data-ajax = 'false'. Насправді це станеться щоразу, коли ajaxEnabled вимкнено, будучи за зовнішньою ланкою, налаштуваннями $ .mobile.ajaxEnabled або наявністю атрибута target = ''.

Ви можете виправити це за допомогою цього:

$("a[data-ajax='false']").live("click", function(event){
  if (this.href) {
    event.preventDefault();
    location.href=this.href;
    return false;
  }
});

(Завдяки Річарду Пулу за метод live () - не працювало з bind ())

Якщо ви відключили ajaxEnabled у всьому світі, вам потрібно буде скинути [data-ajax = 'false'].

Це знадобило мені досить довго, щоб зрозуміти, як я очікував, що це буде специфічна проблема jQuery Mobile, де насправді саме нове вікно фактично забороняє зв'язок Ajax.

Цей код працює для iOS 5 (він працював на мене):

У головному тегу:

<script type="text/javascript">
    function OpenLink(theLink){
        window.location.href = theLink.href;
    }
</script>

У посиланні, яке потрібно відкрити в тому ж вікні:

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

Я отримав цей код із цього коментаря: метатеги iphone web app

Можливо, ви повинні дозволити відкривати посилання у новому вікні, коли ціль явно встановлена ​​на "_blank":

$('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) > -1 && href != "#" && $(this).attr("target") != "_blank")
    {
        event.preventDefault();
        window.location = href;
    }

});

Я знайшов дуже повний і ефективний, оскільки він перевіряється, що він працює лише в окремому WebApp, працює без jQuery, а також простий, щойно перевірений під iOS 8.2:

Будьте автономні: не допускайте посилань у автономних веб-програмах, відкриваючи програму Mobile Safari

Ви також можете зробити посилання майже нормально:

<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>

І ви можете видалити хеш-тег і href, все, що він робить, впливає на зовнішній вигляд ..

Це те, що працювало для мене на iOS 6 (дуже незначна адаптація відповіді rmarscher):

<script>                                                                
    (function(document,navigator,standalone) {                          
        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;                         
                }                                                       
                if ("href" in curnode && (curnode.href.indexOf("http") || ~curnode.href.indexOf(location.host)) && curnode.target == false) {
                    e.preventDefault();                                 
                    location.href=curnode.href                          
                }                                                       
            },false);                                                   
        }                                                               
    })(document,window.navigator,"standalone")                          
</script>

Це дещо адаптована версія Шона, яка заважала повернути кнопку

// this function makes anchor tags work properly on an iphone

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
  // For iOS Apps
  $("a").on("click", function(e){

    var new_location = $(this).attr("href");
    if (new_location != undefined && new_location.substr(0, 1) != "#" && new_location!='' && $(this).attr("data-method") == undefined){
      e.preventDefault();
      window.location = new_location;
    }
  });
}

});

Для тих, хто має Twitter Bootstrap та Rails 3

$('a').live('click', function (event) {
  if(!($(this).attr('data-method')=='delete')){
    var href = $(this).attr("href");
    event.preventDefault();
    window.location = href; 
  }   
});

Видалення посилань досі працює таким чином.

Я вважаю за краще відкривати всі посилання всередині окремого режиму веб-додатків, за винятком тих, у яких target = "_ blank". Звичайно, використовуючи jQuery.

$(document).on('click', 'a', function(e) {
    if ($(this).attr('target') !== '_blank') {
        e.preventDefault();
        window.location = $(this).attr('href');
    }
});

Одне вирішення, яке я використовував для веб-програми iOS, полягав у тому, що я створив усі посилання (які були кнопками CSS), кнопки для надсилання форми. Тож я відкрив форму, яка розмістила посилання на призначення, потім введіть type = "submit" Не найкращий спосіб, але це я зрозумів, перш ніж я знайшов цю сторінку.

Я створив пакет, що встановлюється з bower, з відповіді @ rmarscher, яку можна знайти тут:

http://github.com/stylr/iosweblinks

Ви можете легко встановити фрагмент за допомогою "bower" bower install --save iosweblinks

Для тих, хто використовує JQuery Mobile, вищевказані рішення розбивають діалогове вікно, що з’являється. Це дозволить зберегти посилання в межах webapp і забезпечить появу спливаючих вікон.

$(document).on('click','a', function (event) {
    if($(this).attr('href').indexOf('#') == 0) {
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

Можна також зробити це:

$(document).on('click','a', function (event){
    if($(this).attr('data-rel') == 'popup'){
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

Ось, що я використовував би для всіх посилань на сторінці ...

document.body.addEventListener(function(event) {
    if (event.target.href && event.target.target != "_blank") {
        event.preventDefault();
        window.location = this.href;                
    }
});

Якщо ви використовуєте jQuery або Zepto ...

$("body").on("click", "a", function(event) {
   event.target.target != "_blank" && (window.location = event.target.href);
});

Ви можете просто видалити цей метатег.

<meta name="apple-mobile-web-app-capable" content="yes">