如何從iOS 7中的WebApp打開Safari

Question

在以前版本的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中，它沒有。

請注意，這是每個人通常都會問的“對話”問題（“如何不打開Safari”）。 這種行為似乎是新的默認行為，我無法弄清楚如何恢復舊的行為！

Answer 1

2013年3月23日更新：已在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

Answer 2

使用帶有目標_blank的錨標記將在iOS 7.0.3中工作，但使用window.open將無法工作，並將繼續在7.0.3中的webview中打開：

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

Answer 3

對於過去幾個月的測試來說，這是一個眾所周知的問題。 沒有解決方法，從我可以看出，Apple已經對任何修復的ETA保持沉默，甚至認識到它是一個錯誤。 錯誤報告已提交，但未更新/回復。

更多： http ： //www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Answer 4

我找到了暫時解決這個問題的兩個解決方案，兩個顯然都在外部鏈接上使用了preventDefault 。

如果你要鏈接到另一個網站或要下載的東西，我看到的唯一選擇就是諷刺地警告用戶將手指放在鏈接上以獲得觸摸標注提示。 然后，根據它是網站還是PDF，指示他們復制鏈接，或者在PDF的情況下，將其添加到他們的閱讀列表中。 由於警報和確認模態也被破壞，您需要實現自己的模態通知。 如果你已經擁有它應該不會那么麻煩。

更新 [2013-10-25]顯然它已在iOS 7.0.3中修復，並在Safari中打開鏈接...

編輯 [2013-10-05]這是我使用jQuery UI模式的幾乎所有內容

// 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);
  });
}

Answer 5

更新只是想讓任何人知道iOS 7.0.3似乎解決了這個問題。 我保留了獨立的webapps進行測試，今天發布的更新恢復了外部鏈接/應用程序功能。 所以我更新了我的代碼，讓客戶知道更新他們的手機，而不是刪除和重新保存網絡應用程序。

---

我只想添加評論，但顯然這太長了。

當Apple允許無格式的webapps保存到設備的主屏幕時，Apple為WebApp世界奠定了基礎。 這個“蟲子”感覺就像向后退了一步。 在最終版本中留下這樣的間隙錯誤似乎並非如此。 至少沒有一個，一旦他們意識到這一點，他們就不會公開聲明他們正在努力修復它，就像他們使用鎖屏旁路一樣。 雖然似乎並沒有明確的原因，但我感到無比感到有意。

對於處理此問題的開發人員，我能找到的唯一解決方案是

1）將元標記apple-mobile-web-app設置為“no” - 這可以防止未來的用戶處理問題

2）更新了我們的webapp中的代碼，以尋找“獨立”和iOS版本7+。 當條件滿足時，我提供了一個彈出窗口，說明了問題，並添加了該頁面的鏈接，並詢問用戶他們的原諒，並要求他們復制鏈接並粘貼到safari中。

我將鏈接包裝在邊緣到邊緣的標簽上，上面有換行符，並且下面有助於使URL的復制和粘貼過程更容易一些。

Answer 6

2013年10月22日發布的iOS v7.0.3修復了這個問題。

Answer 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中打開 。

Answer 8

它看起來像是一個故意的錯誤，限制了網絡應用程序提供廣告的能力。 也許您可以嘗試在iframe中打開新頁面。

Answer 9

編輯：對不起，我誤解了你原來的問題。 這個解決方案是為了打開一個外部網站。 Basic A href標簽用於打開鏈接並在iOS7中停止工作。 這是我完全打開外部鏈接的唯一方法。

---

以下是我在iOS7中使用保存到桌面的webapp的工作方式。

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

...

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

但問題是，它似乎忽略了目標選項，並在相同的全屏桌面webapp中打開它，並且無法導航回我可以看到的內容。

Answer 10

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

這將打開本地Safari應用程序，即使在最新版本的iOS上...

快樂的編碼!!

Answer 11

也許你應該在page2.html的頭部刪除“apple-mobile-web-app-capable”的元設置

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1