Aplikasi Web Safari iPhone membuka tautan di jendela baru

Saya memiliki masalah dengan web setelah menambahkan ikon ke Layar Utama. Jika web diluncurkan dari Layar Utama, semua tautan akan terbuka di jendela baru di Safari (dan kehilangan fungsionalitas layar penuh). Bagaimana saya bisa mencegahnya? Saya tidak dapat menemukan bantuan, hanya pertanyaan yang sama yang belum terjawab.

Saya menemukan solusi JavaScript dalam kerangka kerja 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
    }
}

Solusi lain di sini tidak memperhitungkan tautan eksternal (yang mungkin ingin Anda buka secara eksternal di Safari) atau tidak memperhitungkan tautan relatif (tanpa domain di dalamnya).

Proyek html5 mobile-boilerplate menautkan ke inti ini yang memiliki diskusi yang bagus tentang topik ini: https://gist.github.com/1042026

Inilah kode terakhir yang mereka buat:

<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>

Jika Anda menggunakan jQuery, Anda dapat melakukan:

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

Ini berfungsi untuk saya di iOS 6.1 dan dengan tautan Bootstrap JS (mis. Menu dropdown dll)

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

Ini adalah pertanyaan lama dan banyak solusi di sini menggunakan javascript. Sejak itu, iOS 11.3 telah dirilis dan sekarang Anda dapat menggunakan anggota lingkup . Anggota lingkup adalah URL seperti di "/"mana semua jalur di bawah lingkup itu tidak akan membuka halaman baru.

Anggota lingkup adalah string yang mewakili cakupan navigasi dari konteks aplikasi aplikasi web ini.

Ini contoh saya:

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

Anda juga dapat membaca lebih lanjut di sini . Saya juga merekomendasikan menggunakan generator yang akan menyediakan fungsionalitas ini.

Jika Anda menentukan cakupan, semuanya berfungsi seperti yang diharapkan mirip dengan Android, tujuan di luar cakupan akan terbuka di Safari - dengan tombol kembali (yang kecil di bilah status) ke PWA Anda.

Berdasarkan jawaban Davids dan komentar Richards, Anda harus melakukan pemeriksaan domain. Jika tidak, tautan ke situs web lain juga akan dibuka di aplikasi web Anda.

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

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

Jika menggunakan jQuery Mobile Anda akan mengalami jendela baru saat menggunakan atribut data-ajax = 'false'. Bahkan, ini akan terjadi setiap kali ajaxEnabled dimatikan, sedang oleh dan tautan eksternal, oleh pengaturan $ .mobile.ajaxEnabled atau dengan memiliki atribut target = ''.

Anda dapat memperbaikinya menggunakan ini:

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

(Terima kasih kepada Richard Poole untuk metode live () - tidak bekerja dengan bind ())

Jika Anda telah mematikan ajaxEnabled secara global, Anda harus melepaskan [data-ajax = 'false'].

Ini butuh waktu agak lama bagi saya untuk mencari tahu karena saya mengharapkannya menjadi masalah khusus jQuery Mobile di mana sebenarnya itu adalah tautan Ajax yang sebenarnya melarang jendela baru.

Kode ini berfungsi untuk iOS 5 (berfungsi untuk saya):

Di tag kepala:

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

Di tautan yang ingin Anda buka di jendela yang sama:

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

Saya mendapat kode ini dari komentar ini: tag meta aplikasi web iphone

Mungkin Anda harus mengizinkan untuk membuka tautan di jendela baru ketika target secara eksplisit diatur ke "_blank" juga:

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

});

Saya telah menemukan satu yang sangat lengkap dan efisien karena memeriksa untuk berjalan hanya di bawah WebApp mandiri, bekerja tanpa jQuery dan juga mudah, hanya diuji di iOS 8.2:

Tetap Standalone: ​​Cegah tautan di aplikasi web mandiri yang membuka Mobile Safari

Anda juga dapat melakukan penautan hampir secara normal:

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

Dan Anda dapat menghapus tag hash dan href, semua yang dilakukannya mempengaruhi penampilan ..

Inilah yang bekerja untuk saya di iOS 6 (adaptasi yang sangat sedikit dari jawaban 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>

Ini adalah versi Sean yang sedikit diadaptasi yang mencegah tombol kembali

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

});

Bagi mereka dengan Twitter Bootstrap dan Rails 3

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

Hapus tautan masih bekerja dengan cara ini.

Saya lebih suka membuka semua tautan di dalam mode aplikasi web mandiri kecuali yang memiliki target = "_ blank". Menggunakan jQuery, tentu saja.

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

Satu solusi yang saya gunakan untuk aplikasi web iOS adalah bahwa saya membuat semua tautan (yang merupakan tombol oleh CSS) dari tombol kirim. Jadi saya membuka formulir yang diposting ke tautan tujuan, lalu input type = "submit" Bukan cara terbaik, tapi itulah yang saya temukan sebelum saya menemukan halaman ini.

Saya membuat paket installable bower dari jawaban @ rmarscher yang dapat ditemukan di sini:

http://github.com/stylr/iosweblinks

Anda dapat dengan mudah menginstal snippet dengan menggunakan bower bower install --save iosweblinks

Bagi yang menggunakan JQuery Mobile, solusi di atas memecah dialog popup. Ini akan menjaga tautan di dalam webapp dan memungkinkan popup.

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

Bisa juga dengan:

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

Inilah yang akan saya gunakan untuk semua tautan di halaman ...

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

Jika Anda menggunakan jQuery atau Zepto ...

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

Anda cukup menghapus tag meta ini.

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