JavaScript >> Javascript 文檔 >  >> jQuery

5 種方法來修復 jQuery $.browser 函數丟失未找到

好的,現在正式宣布 $.browser 函數已被棄用 .我們做什麼?不要驚慌,我有 以下 5 種可能的解決方案 供您自行決定實施。來自 repo 的這條 GitHub 消息確實說明了一切:

“不再維護此回購不活躍。如果需要$.browser,請使用jQuery Migrate插件,重寫代碼,或者直接使用navigator.userAgent。”

那麼為什麼 $.browser 被刪除了?

大多數開發人員在開始看到錯誤出現時首先想到的是 “這到底是什麼,為什麼 $.browser 被刪除了?” .好吧,讓我解釋一些可能的原因。由於 $.browser 使用 navigator.userAgent 來確定平台,因此容易受到用戶的欺騙或瀏覽器本身的虛假陳述 .在可能的情況下,最好完全避免使用特定於瀏覽器的代碼。 $.support 屬性可用於檢測對特定功能的支持,而不是依賴於 $.browser。

可用的標誌是:

  • webkit(從 jQuery 1.4 開始)
  • Safari(已棄用)
  • 歌劇
  • msie(請注意,IE8 在兼容性視圖中聲稱為 7)
  • Mozilla

解決方案 1 – 遷移 jQuery

使用 jQuery Migrate 插件將早期版本的 jQuery 升級到 jQuery 1.9.x。這是 migrate $.browser 代碼的全部優點:

jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();

        var match = /(chrome)[ /]([w.]+)/.exec( ua ) ||
                /(webkit)[ /]([w.]+)/.exec( ua ) ||
                /(opera)(?:.*version|)[ /]([w.]+)/.exec( ua ) ||
                /(msie) ([w.]+)/.exec( ua ) ||
                ua.indexOf("compatible") Solution 2 - Use Modernizr
Use Modernizr to utilise feature detection, HTML5/CSS3 etc... instead of basic browser detection. I think Modernizr is great!


Solution 3 - Use jQuery.Support

Use the new $.support to utilise feature & bug detection. Once again jQuery does all the hard work and performs tests on browser and stores results on the jQuery.support object (every page load by default). We can then simple query this object to determine is a feature is available to use or not. For example to check for opacity support simply do this: [js] if (jQuery.support.opacity) { //opacity you may do... }

解決方案 4 – 使用 JavaScript/手動檢測

使用以下 JavaScript 代碼片段檢測瀏覽器和版本。 Quirksmode 有一個相當廣泛的 JavaScript 瀏覽器/設備檢測對象,這可能很有用。

/*
        Internet Explorer sniffer code to add class to body tag for IE version.
        Can be removed if your using something like Modernizr.
    */
    var ie = (function ()
    {

        var undef,
        v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i');

        while (
        div.innerHTML = '',
        all[0]);

        //append class to body for use with browser support
        if (v > 4)
        {
            $('body').addClass('ie' + v);
        }

    }());

解決方案 5 - 預防/通知

只需告知用戶他們使用的 jQuery 版本不支持 $.browser 功能。可能不會推薦這個解決方案,因為它對可用性沒有任何作用,但可以用來阻止某些插件。 我建議使用開發人員版本的 Migrate 插件,它會開啟信息調試 .

var undef;
    if ($.browser == undef) {
      message = [];
      message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
      message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
      message.push("Install jquery-browser: https://raw.github.com/jquery/jquery-browser/master/src/jquery.browser.js");
      alert(message.join("n"));
      return $;
    }

來源:https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.plugin.1.9.1.js

一如既往,歡迎提出意見、建議和改進。


Tutorial JavaScript 教程
  1. RxJS 簡化(不要失去你的彈珠)

  2. 5 種改善網站的工具

  3. JS 中的媒體查詢

  4. 使用 Figma 和 AWS Amplify Studio 創建 React 組件

  5. 如何遞歸搜索所有父節點

  6. 如何使用Javascript從地址欄中獲取哈希之前的所有內容?

  7. HTML userMedia facesMode:“環境”在安卓手機上不起作用

  1. React 測試和格式化變得容易

  2. Recoil to Jotai(帶打字稿)

  3. 使用顏色選擇器更改 React 中下拉項的顏色

  4. 5 個 jQuery Touch Swipe 圖片庫插件

  5. 使用 Node.js 進行網頁抓取

  6. 日記 - 2018.09.19

  7. 在自定義屬性中訪問 Nuxt 資產 URL

  1. 深入了解 Angular Pipe + 使用 Pipe 提高性能的技巧

  2. 網絡性能分析:Nike.com

  3. Vue R1 2022 的 Kendo UI 新增功能

  4. Redux:組合減速器