Как открыть Safari из WebApp в iOS 7

В предыдущих версиях iOS теги <a> открывали Mobile Safari, и вам приходилось перехватывать их, чтобы вместо этого оставаться внутри webapp (HTML-страница, которая была сохранена на домашнем экране пользователем).

Начиная с iOS 7, все ссылки остаются внутри WebApp. Я не могу понять, как заставить его открывать Safari, когда я действительно этого хочу.

Я пробовал использовать window.open и a target="_blank", но не работает.

Вот пример. https://s3.amazonaws.com/kaontest/testopen/index.html

Если вы сохраните это на своем домашнем экране в iOS 6, ссылка откроет Safari. Но в iOS 7 это не так.

Обратите внимание, что это вопрос OPPOSITE, который обычно задают все ( "как НЕ открывать Safari" ). Это поведение кажется новым дефолтом, и я не могу понять, как вернуть прежнее поведение!

Ответы

Ответ 1

Наличие тега привязки с целевым _blank будет работать в iOS 7.0.3, но использование window.open не будет работать и останется открытым в webview в 7.0.3:

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

Ответ 2

Обновление 10/23/13: исправлено в iOS 7.0.3. Добавьте к вашим ссылкам атрибут target = "xxx", чтобы сделать это. Также работает с mailto: и друзьями.

Это ошибка в iOS 7.0, 7.0.1 и 7.0.2, и там нет известного способа сделать это.

Это регресс от более ранних версий iOS, где ссылки, открытые в Safari, работают очень хорошо. Он, кажется, входит в группу проблем, связанных с открытием URL-адресов, без использования внешних схем URL-адресов (например, "mailto:" тоже не работает).

Обычные подозреваемые в работе над такой проблемой, к сожалению, не работают (например, используя форму и отправляя ее с целью "_new" ).

Другие серьезные проблемы, такие как предупреждение и подтверждение модальных диалогов, не работают вообще.

Это может помочь представить их как ошибки Apple, http://bugreport.apple.com

Ответ 3

Это известная проблема за последние пару месяцев бета-версии. Нет никаких проблем, и я могу сказать, что Apple молчала о любых исправлениях ETA или даже признавала это ошибкой. Отчеты об ошибках были отправлены, но не обновлены/отредактированы.

Подробнее: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Ответ 4

Я нашел два решения на данный момент, оба из которых, очевидно, используют preventDefault для внешних ссылок.

Если вы ссылаетесь на другой веб-сайт или что-то загружать, единственный вариант, который я вижу, - это иронически предупредить пользователя, чтобы он провел пальцем по ссылке, чтобы получить подсказку подсказки касания. Затем, в зависимости от того, является ли он веб-сайтом или PDF файлом, попросите их либо скопировать ссылку, либо в случае с PDF файлом, добавьте ее в свой список чтения. Поскольку оповещения и подтверждения модалов также нарушены, вам нужно будет реализовать свои собственные модальные уведомления. Если у вас уже есть, это не должно быть так много неприятностей.

Обновление [2013-10-25] По-видимому, оно исправлено в iOS 7.0.3 и ссылки открываются в Safari...

Изменить [2013-10-05] Здесь очень многое, что я использую с модальным интерфейсом jQuery

// iOS 7 external link polyfill
$('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) {

  if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
    e.preventDefault(); e.stopPropagation();

    var href = $(this).attr('href');

    var $dialog = $('<div id="ios-copy"></div>')
      .html('<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="' + href + '">' + href + '</a></p>')
      .appendTo('body')
      .dialog({
        title: 'External link',
        modal: true,
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });
  }
});

В другом обходном пути используется ajax или iframe для загрузки внешнего контента, но если у вас нет хорошего под-браузера или что-то в вашем приложении, он будет выглядеть отрывочным. Здесь что-то такое.

// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
  $('a[rel=external], a[href$=".pdf"]').on('click', function(e) {
    e.preventDefault(); e.stopPropagation();

    var link = this;
    var href = $(link).attr('href');

    var frameContainer = $('<div></div>').css({
      position: 'absolute',
      left: 10,
      top: $(link).position().top,
      opacity: 0,
      overflow: 'scroll',
      '-webkit-overflow-scrolling': 'touch',
      height: 520,
      transition: 'opacity .25s',
      width: 300
    });

    var iosFrame = $('<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>')
      .attr('src', href)
      .css({
        height: 5000,
        'max-width': 1024,
        width: 1024,
        overflow: 'scroll !important',
        '-webkit-overflow-scrolling': 'touch !important'
      });

    var iosFrameClose = $('<a href="#"><i class="icon-cancel icon-remove icon-3x"></i></a>').css({
      position: 'absolute',
      left: -10,
      top: $(link).position().top - 20,
      'text-shadow': '1px 1px 1px #000',
      transition: 'opacity .25s',
      opacity: 0,
      '-webkit-transform': 'translate3d(0, 0, 0)',
      width: '3em',
      height: '3em'
    }).on('click', function(e) {
      e.preventDefault();
      setTimeout( function() {
        $(frameContainer).remove();
        $(iosFrameClose).remove();
      }, 250);
    });

    iosFrame.appendTo(frameContainer);
    frameContainer.appendTo('body');
    iosFrameClose.appendTo('body');

    iosFrame.contents().css({
      '-webkit-transform': 'translate3d(0, 0, 0)'
    });

    // Show this thing
    setTimeout( function() {
      $(frameContainer).css({ opacity: 1 });
      $(iosFrameClose).css({ opacity: 1 });
    }, 1);
  });
}

Ответ 5

UPDATE Просто хотел, чтобы кто-нибудь из них знал, что iOS 7.0.3, похоже, исправить эту проблему. Я сохраняю автономные webapps, сохраненные для тестирования, и выпущенное сегодня обновление восстановило функциональность внешних ссылок/приложений. Поэтому я обновил свой код, чтобы клиенты знали, что обновляют свои телефоны, а не удаляют и повторно сохраняют веб-приложение.

Я собирался просто добавить комментарий, но, видимо, это слишком долго.

Apple создала основу для мира WebApp, когда они разрешали сохранять бесцветные веб-копии на главном экране устройства. Эта "ошибка" кажется важным шагом назад. Кажется, не совсем яблоко, чтобы оставить такую ​​пропущенную ошибку в финальном выпуске. По крайней мере, не один, когда они узнают об этом, они не публично заявляют, что они работают над исправлением для него, как это было сделано с обходными экранами lockscreen. Я не могу помочь, что это кажется умышленным, хотя, похоже, нет ясной причины.

Для разработчиков, занимающихся этой проблемой, единственным решением, которое я смог найти, было

1-й) Установите метатег apple-mobile-web-app-able для "нет" - это предотвратит проблемы будущих пользователей от проблемы.

2nd) Обновлен код в нашем webapp, чтобы найти "автономный" и iOS версии 7+. Когда условия встречаются, я предложил всплывающее окно, в котором говорилось об этой проблеме, и добавил ссылку на эту страницу и попросил пользователей простить их и попросил скопировать ссылку и вставить ее в сафари.

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

Ответ 6

iOS v7.0.3 выпущен 10/22/13 устраняет проблему.

Ответ 7

window.open('http://www.google.com/'); // stays in web app view

<a href='http://www.google.com/' target='_blank'>Click Here</a> // opens in safari

Если вы хотите открыть Safari, но использование якорного тега, подобного этому, невозможно по какой-либо причине, JavaScript-решение этого вопроса также откроется в Safari.

Ответ 8

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

это откроет собственное приложение Safari даже в последней версии iOS...

Счастливое кодирование!!

Ответ 9

Он выглядит подозрительно, как преднамеренная ошибка, позволяющая ограничить возможности веб-приложений предоставлять рекламные объявления. Возможно, вы можете попробовать открыть новую страницу в iframe.

Ответ 10

EDIT: Извините, я неправильно прочитал вашу оригинальную проблему. Это решение предназначалось для открытия внешнего веб-сайта вообще. Основные теги href, используемые для открытия ссылок и прекращения работы в iOS7. Это был единственный способ заставить его открыть внешнюю ссылку вообще.

Вот как я получил его для работы с webapp, сохраненным на рабочем столе в iOS7.

function openpage()
{
window.open('http://www.yourlinkhere.com', '_blank');
}

...

<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>

Проблема заключается в том, что она, кажется, игнорирует целевой параметр, и он открывает его в одном полноэкранном рабочем столе webapp, и нет способа вернуться назад, что я вижу.