ตรวจหา Safari โดยใช้ jQuery

แม้ว่าทั้งสองจะเป็นเบราว์เซอร์ที่ใช้ Webkit แต่ Safari urlencodes อัญประกาศใน URL ในขณะที่ Chrome ไม่มี

ดังนั้นฉันต้องแยกความแตกต่างระหว่างสองสิ่งนี้ใน JS

เอกสารการตรวจหาเบราว์เซอร์ของ jQueryทำเครื่องหมาย "ซาฟารี" ว่าเลิกใช้แล้ว

มีวิธีที่ดีกว่านี้หรือฉันแค่ยึดติดกับค่าที่เลิกใช้ไปแล้วในตอนนี้

ใช้การผสมผสานfeature detectionและUseragentสตริง:

    var is_opera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var is_Edge = navigator.userAgent.indexOf("Edge") > -1;
    var is_chrome = !!window.chrome && !is_opera && !is_Edge;
    var is_explorer= typeof document !== 'undefined' && !!document.documentMode && !is_Edge;
    var is_firefox = typeof window.InstallTrigger !== 'undefined';
    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

การใช้งาน:
if (is_safari) alert('Safari');

หรือสำหรับ Safari เท่านั้นให้ใช้สิ่งนี้:

if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}

ข้อมูลต่อไปนี้ระบุ Safari 3.0+ และแยกความแตกต่างจาก Chrome:

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)

น่าเสียดายที่ตัวอย่างข้างต้นจะตรวจพบเบราว์เซอร์เริ่มต้นของ Android เป็น Safari ซึ่งไม่ใช่ ฉันใช้ navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1

สำหรับการตรวจสอบ Safari ฉันใช้สิ่งนี้:

$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
    alert('this is safari');
}

มันทำงานได้อย่างถูกต้อง

เห็นได้ชัดว่าโซลูชันเดียวที่เชื่อถือได้และได้รับการยอมรับคือทำการตรวจจับคุณสมบัติเช่นนี้:

browser_treats_urls_like_safari_does = false;
var last_location_hash = location.hash;
location.hash = '"blah"';
if (location.hash == '#%22blah%22')
    browser_treats_urls_like_safari_does = true;
location.hash = last_location_hash;

วิธีเดียวที่ฉันพบคือตรวจสอบว่า navigator.userAgent มีคำว่า iPhone หรือ iPad หรือไม่

if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
    //is safari
}

$.browserหากคุณกำลังตรวจสอบการใช้งานเบราว์เซอร์ แต่ถ้าคุณกำลังตรวจสอบการสนับสนุนคุณลักษณะ (แนะนำ) $.supportการใช้งานแล้ว

คุณไม่ควรใช้ $ .browser เพื่อเปิด / ปิดคุณสมบัติบนเพจ เหตุผลที่ไม่น่าเชื่อถือและโดยทั่วไปไม่แนะนำ

หากคุณต้องการการสนับสนุนคุณสมบัติแล้วฉันขอแนะนำModernizr

//Check if Safari
  function isSafari() {
      return /^((?!chrome).)*safari/i.test(navigator.userAgent);
  }
//Check if MAC
     if(navigator.userAgent.indexOf('Mac')>1){
        alert(isSafari());
     }

http://jsfiddle.net/s1o943gb/10/

วิธีที่มีประโยชน์มากในการแก้ไขปัญหานี้คือการตรวจหาเวอร์ชัน webkit ของเบราว์เซอร์และตรวจสอบว่าเป็นเวอร์ชันที่เราต้องการอย่างน้อยหรือไม่ควรทำอย่างอื่น

การใช้ jQuery จะเป็นดังนี้:

"use strict";

$(document).ready(function() {
    var appVersion                  = navigator.appVersion;
    var webkitVersion_positionStart = appVersion.indexOf("AppleWebKit/") + 12;
    var webkitVersion_positionEnd   = webkitVersion_positionStart + 3;
    var webkitVersion               = appVersion.slice(webkitVersion_positionStart, webkitVersion_positionEnd);
	
    console.log(webkitVersion);

    if (webkitVersion < 537) {
        console.log("webkit outdated.");
    } else {
        console.log("webkit ok.");
    };
});

นี่เป็นการแก้ไขที่ปลอดภัยและถาวรสำหรับการจัดการกับปัญหาเกี่ยวกับการใช้งาน webkit ต่างๆของเบราว์เซอร์

ขอให้สนุกกับการเขียนโค้ด!

สิ่งนี้จะกำหนดว่าเบราว์เซอร์เป็น Safari หรือไม่

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}

    // Safari uses pre-calculated pixels, so use this feature to detect Safari
    var canva = document.createElement('canvas');
    var ctx = canva.getContext("2d");
    var img = ctx.getImageData(0, 0, 1, 1);
    var pix = img.data;     // byte array, rgba
    var isSafari = (pix[3] != 0);   // alpha in Safari is not zero

ฉันใช้เพื่อตรวจจับเอ็นจิ้นเบราว์เซอร์ของ Apple เงื่อนไข JavaScript ง่ายๆนี้:

 navigator.vendor.startsWith('Apple')

ฟังก์ชันทั่วไป

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };