Câu hỏi Cách đúng để sử dụng Modernizr để phát hiện IE?


Đây có thể là một câu hỏi ngu ngốc, nhưng tôi muốn sử dụng thư viện Modernizr JS để phát hiện một số thuộc tính trình duyệt để xác định nội dung nào hiển thị hoặc không hiển thị.

Tôi có một ứng dụng được gọi là Pano2VR xuất ra cả HTML5 và SWF. Tôi cần người dùng thiết bị HTML5 cho iOS.

Tuy nhiên, IE không hiển thị đầu ra "HTML5" này. Dường như đầu ra của họ sử dụng các biến đổi CSS3 3D và WebGL, một hoặc nhiều dường như không được hỗ trợ trong IE9.

Vì vậy, đối với những người dùng tôi cần phải hiển thị phiên bản Flash. Tôi đã định sử dụng IFRAME và chuyển SRC qua tập lệnh hoặc văn bản Modernizr, viết mã IFRAME chính xác tùy thuộc vào trình duyệt.

Tất cả đều dẫn đến cách tôi sử dụng Modernizr để phát hiện IE đơn giản hay không phải là IE? Hoặc phát hiện các biến đổi CSS 3D?

Hay có cách nào khác để làm điều này?


76
2017-11-20 17:04


gốc




Các câu trả lời:


Modernizr không phát hiện trình duyệt như vậy, nó phát hiện tính năng và khả năng có mặt và đây là toàn bộ jist của những gì nó đang cố gắng để làm.

Bạn có thể thử móc trong một kịch bản phát hiện đơn giản như thế này và sau đó sử dụng nó để làm cho sự lựa chọn của bạn. Tôi đã bao gồm phát hiện phiên bản cũng chỉ trong trường hợp đó là cần thiết. Nếu bạn chỉ muốn kiểm tra bất kỳ phiên bản nào của IE, bạn chỉ cần tìm navigator.userAgent có giá trị là "MSIE".

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

Sau đó bạn có thể chỉ cần kiểm tra:

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;

176
2017-11-20 19:14



Cảm ơn. Cuối cùng, tôi đã theo dõi vấn đề này là vấn đề hỗ trợ webgl cần thiết của họ. Vì vậy, tôi có thể sử dụng Modernizer để kiểm tra cho điều đó và làm một document.write của một khối mã của người khác. Nhưng đây là một giải pháp tuyệt vời để phát hiện trình duyệt. Cảm ơn một lần nữa. - Steve
Một điều cần nhớ: Chuỗi UA hoàn toàn có thể định cấu hình người dùng .. Vì vậy, việc kiểm tra chuỗi UA KHÔNG phải là cách nhất quán để kiểm tra trình duyệt. developer.mozilla.org/en-US/docs/DOM/window.navigator.userAgent  Trong phần "Ghi chú": Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable. - Andrew Senner
Có, nhưng tỷ lệ phần trăm người dùng đang duyệt web bằng chuỗi UA được sửa đổi / giả mạo / không chính xác? Bạn muốn dành bao nhiêu thời gian kỹ thuật để đảm bảo rằng thiểu số nhỏ bé có trải nghiệm tối ưu trên trang web của bạn? Trình duyệt đánh hơi qua chuỗi UA là một cách tiếp cận thực tế và lành mạnh. - Jed Richards
@ Wintamute, không thể đồng ý hơn. Bị bệnh của "phát hiện tính năng là ác" loại bài giảng. Chúng tôi đang làm kỹ thuật, không theo đuổi nghệ thuật - Philip007
Đó là giả định chung rằng nếu ai đó sửa đổi chuỗi UA của họ, thì họ biết họ đang làm gì và họ có thể giải quyết hậu quả. Trong thực tế, đây chính xác là những gì chuỗi UA tồn tại - để khai báo phiên bản trình duyệt cho máy chủ. Nếu khách hàng muốn nói dối về điều đó, thì tốt, đó chỉ là cuộc sống! Tất nhiên có một khả năng nhỏ của chuỗi được thay đổi mà không có sự đồng ý của người dùng nhưng trong thực tế đó không phải là một mối quan tâm thực sự - và hey chúng ta phải nuôi người sử dụng và chà lưng của họ quá? - Rolf


Bạn có thể dùng Modernizr để phát hiện đơn giản là IE hoặc không phải IE, bằng cách kiểm tra SVG SMIL hỗ trợ hoạt ảnh.

Nếu bạn đã bao gồm SMIL phát hiện tính năng trong thiết lập Modernizr của bạn, bạn có thể sử dụng phương pháp CSS đơn giản và nhắm mục tiêu .no-smil lớp Modernizr áp dụng cho html thành phần:

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

Ngoài ra, bạn có thể sử dụng Modernizr với một phương pháp JavaScript đơn giản, như sau:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

Ghi nhớ, IE / Edge có thể một ngày nào đó hỗ trợ SMIL, nhưng hiện tại không có kế hoạch để làm như vậy.

Để tham khảo, đây là liên kết đến SMIL biểu đồ tương thích tại caniuse.com.


19
2018-03-25 00:19



Câu trả lời hay nhất imo. Quá dễ - Batman
Trong khi điều này không hoạt động, nó hoạt động ngay bây giờ. Toàn bộ điểm phát hiện tính năng và Modernizr là bạn không phải lo lắng về những gì xảy ra vào ngày mai. Nếu Edge cập nhật ngày mai với sự hỗ trợ smil, mã của bạn không còn hoạt động nữa và thậm chí bạn có thể không biết nó. - Jason
@ Jason đã chỉnh sửa để biết thêm thông tin và thận trọng. - jacefarm


Phát hiện các biến đổi CSS 3D

Modernizr có thể phát hiện các biến đổi CSS 3Dvâng. Tính trung thực của Modernizr.csstransforms3d sẽ cho bạn biết nếu trình duyệt hỗ trợ chúng.

Liên kết ở trên cho phép bạn chọn các thử nghiệm để bao gồm trong bản dựng Modernizr và tùy chọn bạn đang tìm kiếm có sẵn ở đó.


Phát hiện IE cụ thể

Cách khác, như user356990 đã trả lời, bạn có thể sử dụng bình luận có điều kiện nếu bạn đang tìm kiếm IE và IE một mình. Thay vì tạo biến toàn cầu, bạn có thể sử dụng HTML5 Boilerplate <html> bình luận có điều kiện để chỉ định một lớp:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Nếu bạn đã có jQuery khởi tạo, bạn chỉ có thể kiểm tra $('html').hasClass('lt-ie9'). Nếu bạn cần kiểm tra phiên bản IE nào bạn đang ở trong đó, bạn có thể tải một trong hai điều kiện jQuery 1.x hoặc 2.x, bạn có thể làm một cái gì đó như thế này:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

N.B. IE ý kiến ​​có điều kiện chỉ được hỗ trợ lên đến IE9 bao gồm. Từ IE10 trở đi, Microsoft khuyến khích sử dụng tính năng phát hiện thay vì phát hiện trình duyệt.


Cho dù bạn chọn phương pháp nào, bạn sẽ thử nghiệm với

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
} 

Đừng lấy cái đó || theo nghĩa đen, tất nhiên.


12
2017-09-05 07:15



Cá nhân tôi luôn cố gắng phát hiện dựa trên tính năng thay vì phát hiện trình duyệt - Chris
@ Chris tốt cho bạn, cùng ở đây? Tôi ... không nghĩ rằng bạn thực sự đọc câu trả lời của tôi. - iono
Bạn là câu trả lời đầu tiên thực sự đề xuất sử dụng tính năng phát hiện để tìm ra nó có thể giúp người khác nếu họ đọc nhận xét - Chris
@ Chris oh, xin lỗi. Tôi nghĩ bạn đã lên án tôi vì đã bao gồm bài kiểm tra IE. - iono


Nếu bạn đang tìm kiếm một phiên bản JS (sử dụng một sự kết hợp của tính năng phát hiện và UA sniffing) của những gì html5 boilerplate được sử dụng để làm:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

9
2017-11-07 13:56





Bạn có thể dùng < !-- [if IE] > hack để thiết lập một biến js toàn cầu mà sau đó được kiểm tra trong mã js bình thường của bạn. Một chút xấu xí nhưng đã làm việc tốt cho tôi.


2
2018-02-25 16:43



Nhận xét có điều kiện không được hỗ trợ nhiều hơn trong trình khám phá internet> = 10. - rudimenter


Các thủ thuật CSS có một giải pháp tốt để nhắm mục tiêu IE 11:

http://css-tricks.com/ie-10-specific-styles/

.NET và Trident / 7.0 là duy nhất cho IE nên có thể được sử dụng để phát hiện phiên bản IE 11.

Đoạn mã sau đó thêm chuỗi Tác nhân người dùng vào thẻ html với thuộc tính 'data-useragent', vì vậy IE 11 có thể được nhắm mục tiêu cụ thể ...


2
2017-12-19 15:52





Tôi cần phát hiện IE so với hầu hết mọi thứ khác và tôi không muốn phụ thuộc vào chuỗi UA. Tôi thấy rằng việc sử dụng es6number với Modernizr đã làm chính xác những gì tôi muốn. Tôi không có nhiều mối quan tâm với việc thay đổi này vì tôi không mong đợi IE sẽ hỗ trợ ES6 Number. Vì vậy, bây giờ tôi biết sự khác biệt giữa bất kỳ phiên bản của IE vs Edge / Chrome / Firefox / Opera / Safari.

Xem thêm chi tiết tại đây: http://caniuse.com/#feat=es6-number

Lưu ý rằng tôi không thực sự quan tâm đến âm thanh giả của Opera Mini. Bạn có thể là.


1
2017-10-28 03:37