2017-04-30 14 views
8

Khi ở chế độ ứng dụng web độc lập của iOS và bạn nhấp vào một liên kết, liên kết đó được mở trong Mobile Safari thay vì ở chế độ độc lập. Điều này không có ý nghĩa với tôi (ít nhất là cho các liên kết nội bộ).Cách ở chế độ độc lập của iOS Safari khi điều hướng

Cách duy nhất tôi có thể nghĩ đến sửa chữa này sẽ bổ sung một handler nhấp chuột vào nút document, và tự điều hướng như thế này:

if (window.navigator.standalone) { 
    document.addEventListener('click', (e) => { 
    if (e.target.tagName === 'A') { 
     e.preventDefault(); 
     window.location = e.target.getAttribute('href'); 
    }); 
} 

Có cách nào ít hacky có được hành vi này? Điều này thực sự làm tổn thương đôi mắt của tôi.

Trả lời

2

Điều không may dọc theo các dòng đó là cách tiêu chuẩn để thực hiện. irae trên GitHub đã đặt cùng một kịch bản gọi là Stay Standalone sẽ xử lý tất cả các công việc bẩn cho bạn và được thử nghiệm trên nhiều trường hợp cạnh khác nhau. Mặc dù tập lệnh cũ hơn một chút nhưng nó hoạt động trên phiên bản iOS hiện đại.

Có thể hơi xấu xí, nhưng mã này có khả năng đàn hồi và có thể được bao gồm trong gói Javascript chung. Nó sẽ không thay đổi hành vi cho các tình huống khác. Đây chỉ là suy đoán, nhưng lý do tôi nghĩ Apple chọn hành vi này là ứng dụng web độc lập không có nút chuyển tiếp hoặc quay lại và nhấp vào liên kết có thể đặt ứng dụng ở trạng thái "không sử dụng được" và cho các trang web không có ý định là ứng dụng. Đây có lẽ là hành vi mong muốn nhất trong trường hợp chung cho người dùng cuối.

Đây là một bản sao của Javascript:

(function(document,navigator,standalone) { 
    // prevents links from apps from oppening in mobile safari 
    // this javascript must be the first script in your <head> 
    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; 
      } 
      // Condidions to do this only on links to your own app 
      // if you want all links, use if('href' in curnode) instead. 
      if(
       'href' in curnode && // is a link 
       (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor 
       ( !(/^[a-z\+\.\-]+:/i).test(chref) ||      // either does not have a proper scheme (relative links) 
        chref.indexOf(location.protocol+'//'+location.host)===0) // or is in the same protocol and domain 
      ) { 
       e.preventDefault(); 
       location.href = curnode.href; 
      } 
     },false); 
    } 
})(document,window.navigator,'standalone'); 

Bạn có thể thấy the tests here.

+0

Rất tiếc khi thấy rằng đây là phương pháp thực tế cần thiết. Nhưng cảm ơn một tấn! –

+0

Vâng, tôi cũng thấy nó khá là bummer. Tôi ước có một thẻ meta mà chúng tôi có thể sử dụng để chọn tham gia vào hành vi liên kết thông thường. –

Các vấn đề liên quan