在Firefox / IE上隱藏元素，僅在Chrome上顯示

Question

我正在使用<input type="file" webkitdirectory>在Chrome上選擇文件夾。 雖然我知道此功能僅適用於Chrome，但我想在不支持此功能的Firefox和IE等瀏覽器上隱藏此按鈕。

我發現了一條帖子，建議做類似下面的代碼，但是它在chrome和FF上都返回false。

$scope.isDirSupp = function() {
    var tmpInput = $('#bulkyFolder');
    if ('webkitdirectory' in tmpInput 
        || 'mozdirectory' in tmpInput 
        || 'odirectory' in tmpInput 
        || 'msdirectory' in tmpInput 
        || 'directory' in tmpInput) return true;

    return false;
}

html： <input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

在chrome上顯示此按鈕並在Firefox和IE上隱藏該按鈕的最佳方法是什么？

Answer 1

您可以使用CSS僅在Chrome上顯示輸入元素。

 #bulkyFolder { display: none; } #bulkyFolder:not(*:root) { /* Supports only WebKit browsers */ display: block; } 

 <input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp"> 

Answer 2

閱讀如何檢測Safari，Chrome，IE，Firefox和Opera瀏覽器？

它具有瀏覽器檢測技術，演示和實現方法。 他解釋說，如果它是特定的瀏覽器，則將Boolean變量設置為true。 因此，您可以訪問它並僅在特定的瀏覽器上顯示特定的內容。

例如： var isChrome = !!window.chrome && !isOpera;

這將設置變量isChrome

現在，您可以在Java腳本中動態創建內容並顯示是否設置了isChrome 。