Ứng dụng iPhone Safari Web mở các liên kết trong cửa sổ mới

Tôi gặp sự cố với web sau khi thêm biểu tượng vào Màn hình chính. Nếu web được khởi chạy từ Màn hình chính, tất cả các liên kết sẽ mở trong cửa sổ mới trong Safari (và mất chức năng toàn màn hình). Làm thế nào tôi có thể ngăn chặn nó? Tôi không thể tìm thấy bất kỳ trợ giúp, chỉ có câu hỏi chưa được trả lời.

Tôi đã tìm thấy giải pháp JavaScript trong khung 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
    }
}

Các giải pháp khác ở đây không chiếm tài khoản cho các liên kết bên ngoài (mà bạn có thể muốn mở bên ngoài trong Safari) hoặc không tính đến các liên kết tương đối (không có tên miền trong đó).

Dự án nồi hơi di động html5 liên kết đến ý chính này có một cuộc thảo luận tốt về chủ đề này: https://gist.github.com/1042026

Đây là mã cuối cùng họ nghĩ ra:

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

Nếu bạn đang sử dụng jQuery, bạn có thể làm:

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

Điều này hoạt động với tôi trên iOS 6.1 và với các liên kết Bootstrap JS (ví dụ: menu thả xuống, v.v.)

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

Đây là một câu hỏi cũ và nhiều giải pháp ở đây đang sử dụng javascript. Kể từ đó, iOS 11.3 đã được phát hành và bây giờ bạn có thể sử dụng thành viên phạm vi . Thành viên phạm vi là một URL giống như "/"nơi tất cả các đường dẫn trong phạm vi đó sẽ không mở một trang mới.

Thành viên phạm vi là một chuỗi đại diện cho phạm vi điều hướng của bối cảnh ứng dụng của ứng dụng web này.

Đây là ví dụ của tôi:

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

Bạn cũng có thể đọc thêm về nó ở đây . Tôi cũng khuyên bạn nên sử dụng trình tạo sẽ cung cấp chức năng này.

Nếu bạn chỉ định phạm vi, mọi thứ hoạt động như mong đợi tương tự như Android, các điểm đến ngoài phạm vi sẽ mở trong Safari - bằng nút quay lại (nút nhỏ trong thanh trạng thái) cho PWA của bạn.

Dựa trên câu trả lời của Davids và nhận xét của Richards, bạn nên thực hiện kiểm tra tên miền. Nếu không, các liên kết đến các trang web khác cũng sẽ được mở trong ứng dụng web của bạn.

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

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

Nếu sử dụng jQuery Mobile, bạn sẽ trải nghiệm cửa sổ mới khi sử dụng thuộc tính data-ajax = 'false'. Trên thực tế, điều này sẽ xảy ra bất cứ khi nào ajaxEnables bị tắt, bởi và liên kết ngoài, bởi cài đặt $ .mobile.ajaxEnables hoặc bằng cách có thuộc tính target = ''.

Bạn có thể sửa nó bằng cách này:

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

(Cảm ơn Richard Poole về phương thức live () - không hoạt động với bind ())

Nếu bạn đã tắt ajaxEnables trên toàn cầu, bạn sẽ cần bỏ [data-ajax = 'false'].

Điều này khiến tôi mất khá nhiều thời gian để nhận ra vì tôi đang mong đợi nó sẽ là một vấn đề cụ thể của jQuery Mobile trong khi thực tế, chính liên kết Ajax đã thực sự cấm cửa sổ mới.

Mã này hoạt động cho iOS 5 (nó hoạt động với tôi):

Trong thẻ đầu:

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

Trong liên kết mà bạn muốn được mở trong cùng một cửa sổ:

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

Tôi đã nhận được mã này từ nhận xét này: thẻ meta ứng dụng web iphone

Có lẽ bạn nên cho phép mở các liên kết trong cửa sổ mới khi mục tiêu cũng được đặt rõ ràng thành "_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;
    }

});

Tôi đã tìm thấy một thứ rất hoàn chỉnh và hiệu quả vì nó kiểm tra chỉ chạy trong WebApp độc lập, hoạt động không có jQuery và cũng đơn giản, chỉ được thử nghiệm trong iOS 8.2:

Duy trì độc lập: Ngăn chặn các liên kết trong các ứng dụng web độc lập đang mở Mobile Safari

Bạn cũng có thể thực hiện liên kết gần như bình thường:

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

Và bạn có thể xóa thẻ băm và href, mọi thứ nó ảnh hưởng đến ngoại hình ..

Đây là những gì làm việc cho tôi trên iOS 6 (thích ứng rất nhẹ với câu trả lời của rmarscher's):

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

Đây là phiên bản được điều chỉnh một chút của Sean đã ngăn nút quay lại

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

});

Dành cho những người có Twitter Bootstrap và Rails 3

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

Xóa liên kết vẫn hoạt động theo cách này.

Tôi thích mở tất cả các liên kết bên trong chế độ ứng dụng web độc lập ngoại trừ các liên kết có target = "_ blank". Sử dụng jQuery, tất nhiên.

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

Một cách giải quyết khác mà tôi đã sử dụng cho một ứng dụng web iOS là tôi đã tạo tất cả các liên kết (là các nút bằng CSS) dưới dạng các nút gửi. Vì vậy, tôi đã mở một biểu mẫu được đăng lên liên kết đích, sau đó nhập kiểu = "gửi" Không phải là cách tốt nhất, nhưng đó là những gì tôi đã tìm ra trước khi tôi tìm thấy trang này.

Tôi đã tạo một gói có thể cài đặt nhanh hơn từ câu trả lời của @ rmarscher's có thể tìm thấy ở đây:

http://github.com/stylr/iosweblinks

Bạn có thể dễ dàng cài đặt đoạn mã bằng Bower bằng cách sử dụng bower install --save iosweblinks

Đối với những người sử dụng JQuery Mobile, các giải pháp trên phá vỡ hộp thoại bật lên. Điều này sẽ giữ liên kết trong ứng dụng web và cho phép cửa sổ bật lên.

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

Cũng có thể làm điều đó bằng cách:

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

Đây là những gì tôi sẽ sử dụng cho tất cả các liên kết trên một trang ...

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

Nếu bạn đang sử dụng jQuery hoặc Zepto ...

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

Bạn chỉ có thể loại bỏ thẻ meta này.

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