จะตรวจหาเบราว์เซอร์ Safari โดยใช้ JavaScript ได้อย่างไร? ฉันได้ลองใช้รหัสด้านล่างและตรวจพบไม่เพียง แต่ Safari เท่านั้น แต่ยังรวมถึงเบราว์เซอร์ Chrome ด้วย
function IsSafari() {
var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
return is_safari;
}
คำตอบ:
คุณสามารถใช้ดัชนีของ Chrome เพื่อกรอง Chrome ออกได้อย่างง่ายดาย:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("1") // Chrome
} else {
alert("2") // Safari
}
}
หมายเหตุ:พยายามตรวจหาพฤติกรรมเฉพาะที่คุณพยายามแก้ไขเสมอแทนที่จะกำหนดเป้าหมายด้วยisSafari?
เป็นทางเลือกสุดท้ายให้ตรวจหา Safari ด้วย regex นี้:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
มันใช้ มองรอบด้านในเชิงลบและไม่รวมเบราว์เซอร์ Chrome, Edge และ Android ทั้งหมดที่มีSafariชื่อใน User Agent
ตามที่คนอื่น ๆ ได้กล่าวไว้แล้วการตรวจหาคุณสมบัติจึงเป็นที่ต้องการมากกว่าการตรวจสอบเบราว์เซอร์เฉพาะ สาเหตุหนึ่งคือสามารถเปลี่ยนแปลงสตริงตัวแทนผู้ใช้ได้ อีกสาเหตุหนึ่งคือสตริงอาจเปลี่ยนแปลงและทำลายรหัสของคุณในเวอร์ชันที่ใหม่กว่า
หากคุณยังต้องการทำและทดสอบ Safari เวอร์ชันใด ๆ ฉันขอแนะนำให้ใช้สิ่งนี้
var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;
สิ่งนี้จะใช้ได้กับ Safari ทุกเวอร์ชันในทุกอุปกรณ์: Mac, iPhone, iPod, iPad
หากต้องการทดสอบในเบราว์เซอร์ปัจจุบันของคุณ: https://jsfiddle.net/j5hgcbm2/
อัปเดตตามเอกสาร Chromeเพื่อตรวจจับ Chrome บน iOS อย่างถูกต้อง
เป็นที่น่าสังเกตว่าเบราว์เซอร์ทั้งหมดบน iOS เป็นเพียงเครื่องห่อสำหรับ Safari และใช้เอ็นจิ้นเดียวกัน ดูความคิดเห็นของ bfred.it เกี่ยวกับคำตอบของเขาเองในหัวข้อนี้
อัปเดตตามเอกสารของ Firefoxเพื่อตรวจจับ Firefox บน iOS อย่างถูกต้อง
isSafariจะอยู่trueในเบราว์เซอร์ Safari ไม่falseเช่นนั้น คุณสามารถใช้ตัวอย่างข้อมูลด้านบนจากนั้นใช้ของคุณเกือบเท่าที่คุณโพสต์ไว้ if (isSafari) { do_this(); } else { do_that(); }.
&& !navigator.userAgent.match('FxiOS')คล้ายกับการตรวจสอบ Chrome ได้ - อ้างอิง ( developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/… )
เพียงใช้:
var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
getUserMediaฉันต้องการที่จะออกกฎซาฟารีสก์ท็อปสำหรับการขาดของ
รหัสนี้ใช้เพื่อตรวจจับเฉพาะเบราว์เซอร์ซาฟารี
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
{
alert("Browser is Safari");
}
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36 OPR/24.0.1558.51 (Edition Next)หรือ Stock Android browser:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24
เนื่องจาก userAgent สำหรับ chrome และ safari ใกล้เคียงกันจึงสามารถดูผู้จำหน่ายเบราว์เซอร์ได้ง่ายกว่า
Safari
navigator.vendor == "Apple Computer, Inc."
โครเมียม
navigator.vendor == "Google Inc."
FireFox (ทำไมถึงว่างเปล่า?)
navigator.vendor == ""
IE (ทำไมถึงไม่ได้กำหนด?)
navigator.vendor == undefined
เฉพาะSafariยกเว้น Chrome:
หลังจากลองใช้รหัสอื่นแล้วฉันไม่พบสิ่งใดที่ใช้ได้กับ Safari เวอร์ชันใหม่และเก่า
ในที่สุดฉันก็ได้รหัสนี้ที่ใช้งานได้ดีสำหรับฉัน:
var ua = navigator.userAgent.toLowerCase();
var isSafari = false;
try {
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
}
catch(err) {}
isSafari = (isSafari || ((ua.indexOf('safari') != -1)&& (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1))));
//test
if (isSafari)
{
//Code for Safari Browser (Desktop and Mobile)
document.getElementById('idbody').innerHTML = "This is Safari!";
}
else
{
document.getElementById('idbody').innerHTML = "Not is Safari!";
}<body id="idbody">
</body>ฉันไม่รู้ว่าทำไม OP ถึงต้องการตรวจจับ Safari แต่ในกรณีที่หายากคุณต้องใช้เบราว์เซอร์ในการดมกลิ่นในปัจจุบันการตรวจจับเอนจิ้นการเรนเดอร์มีความสำคัญมากกว่าชื่อของเบราว์เซอร์ ตัวอย่างเช่นบน iOS เบราว์เซอร์ทั้งหมดใช้เครื่องมือ Safari / Webkit ดังนั้นจึงไม่มีประโยชน์ที่จะเรียก "chrome" หรือ "firefox" เป็นชื่อเบราว์เซอร์หากตัวแสดงผลที่เป็นพื้นฐานนั้นเป็น Safari / Webkit ฉันไม่ได้ทดสอบโค้ดนี้กับเบราว์เซอร์รุ่นเก่า แต่ใช้งานได้กับทุกสิ่งที่ค่อนข้างล่าสุดบน Android, iOS, OS X, Windows และ Linux
<script>
let browserName = "";
if(navigator.vendor.match(/google/i)) {
browserName = 'chrome/blink';
}
else if(navigator.vendor.match(/apple/i)) {
browserName = 'safari/webkit';
}
else if(navigator.userAgent.match(/firefox\//i)) {
browserName = 'firefox/gecko';
}
else if(navigator.userAgent.match(/edge\//i)) {
browserName = 'edge/edgehtml';
}
else if(navigator.userAgent.match(/trident\//i)) {
browserName = 'ie/trident';
}
else
{
browserName = navigator.userAgent + "\n" + navigator.vendor;
}
alert(browserName);
</script>
ชี้แจง:
ฉันใช้สิ่งนี้
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}
if( getBrowserName() == "Safari" ){
alert("You are using Safari");
}else{
alert("You are surfing on " + getBrowserName(name));
}
ฉันสังเกตว่ามีเพียงคำเดียวเท่านั้นที่ทำให้ Safari - "เวอร์ชัน" แตกต่าง ดังนั้น regex นี้จะทำงานได้อย่างสมบูรณ์แบบ:
/.*Version.*Safari.*/.test(navigator.userAgent)
คำตอบที่ง่ายที่สุด:
function isSafari() {
if (navigator.vendor.match(/[Aa]+pple/g).length > 0 )
return true;
return false;
}
navigator.vendor.toLowerCase().indexOf('apple') > -1
if (navigator.vendor.match(/apple/i)) { ... }...
สำหรับบันทึกวิธีที่ปลอดภัยที่สุดที่ฉันพบคือใช้ส่วน Safari ของรหัสตรวจจับเบราว์เซอร์จากคำตอบนี้ :
const isSafari = window['safari'] && safari.pushNotification &&
safari.pushNotification.toString() === '[object SafariRemoteNotification]';
แน่นอนว่าวิธีที่ดีที่สุดในการจัดการกับปัญหาเฉพาะเบราว์เซอร์คือการตรวจจับคุณลักษณะเสมอหากทำได้ แม้ว่าการใช้โค้ดส่วนหนึ่งเช่นเดียวกับด้านบนนั้นยังดีกว่าการตรวจจับสตริงตัวแทน
ฉันรู้ว่าคำถามนี้เก่า แต่ฉันก็คิดที่จะโพสต์คำตอบอยู่ดีเพราะอาจช่วยใครบางคนได้ โซลูชันข้างต้นล้มเหลวในบางกรณีเราจึงต้องใช้วิธีนี้ในลักษณะที่จัดการกับ iOS, เดสก์ท็อปและแพลตฟอร์มอื่น ๆ แยกกัน
function isSafari() {
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iP(ad|od|hone)/i);
var hasSafariInUa = !!ua.match(/Safari/i);
var noOtherBrowsersInUa = !ua.match(/Chrome|CriOS|OPiOS|mercury|FxiOS|Firefox/i)
var result = false;
if(iOS) { //detecting Safari in IOS mobile browsers
var webkit = !!ua.match(/WebKit/i);
result = webkit && hasSafariInUa && noOtherBrowsersInUa
} else if(window.safari !== undefined){ //detecting Safari in Desktop Browsers
result = true;
} else { // detecting Safari in other platforms
result = hasSafariInUa && noOtherBrowsersInUa
}
return result;
}
regex ที่แก้ไขแล้วสำหรับคำตอบด้านบน
var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
"ปัญหา" ที่ไม่เหมือนใครนี้เป็นสัญญาณ 100% ว่าเบราว์เซอร์คือ Safari (เชื่อหรือไม่)
if (Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').descriptor === false) {
console.log('Hello Safari!');
}
ซึ่งหมายความว่าตัวอธิบายวัตถุคุกกี้ถูกตั้งค่าเป็นเท็จบน Safari ในขณะที่สิ่งอื่น ๆ ทั้งหมดเป็นจริงซึ่งทำให้ฉันปวดหัวกับโครงการอื่น ขอให้สนุกกับการเขียนโค้ด!
อาจจะใช้งานได้:
Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')
แก้ไข: ไม่ต้องทำงานอีกต่อไป
ในกรณีของฉันฉันต้องการกำหนดเป้าหมาย Safari ทั้งบน iOS และ macOS สิ่งนี้ใช้ได้ผลสำหรับฉัน:
if (/apple/i.test(navigator.vendor)) {
// It's Safari
}
ฉันสร้างฟังก์ชันที่ส่งคืนประเภทบูลีน:
export const isSafari = () => navigator.userAgent.toLowerCase().indexOf('safari') !== -1
การดมกลิ่นของตัวแทนผู้ใช้เป็นเรื่องยุ่งยากและไม่น่าเชื่อถือ เราพยายามตรวจจับ Safari บน iOS ด้วยคำตอบของ @ qingu ข้างต้นมันใช้ได้ดีกับ Safari, Chrome และ Firefox แต่ตรวจพบว่า Opera และ Edge เป็น Safari อย่างไม่ถูกต้อง
ดังนั้นเราจึงไปกับการตรวจจับคุณสมบัติเหมือน ณ วันนี้serviceWorkerรองรับเฉพาะใน Safari และไม่ได้อยู่ในเบราว์เซอร์อื่น ๆ บน iOS ตามที่ระบุไว้ในhttps://jakearchibald.github.io/isserviceworkerready/
การสนับสนุนไม่รวมเบราว์เซอร์บุคคลที่สามเวอร์ชัน iOS บนแพลตฟอร์มนั้น (ดูการสนับสนุน Safari)
เราจึงทำสิ่งที่ชอบ
if ('serviceWorker' in navigator) {
return 'Safari';
}
else {
return 'Other Browser';
}
หมายเหตุ : ไม่ได้ทดสอบบน Safari บน MacOS