2017-09-06 89 views
1

我的問題是如何根據瀏覽器用戶使用什麼隱藏一些html元素。對於瀏覽器檢測部分,我已完成。 這些是鉻的東西返回「真」或「假」用於後面的條件。 我缺少什麼代碼來連接js if/else部分以隱藏登錄字段。或其他更好的方法來執行此操作?謝謝。通過瀏覽器檢測來隱藏html表單

\t \t // Firefox 1.0+ 
 
    var isFirefox = typeof InstallTrigger !== 'undefined'; 
 
    
 
    // Chrome 1+ 
 
    var isChrome = !!window.chrome && !!window.chrome.webstore; 
 
    
 
    // Edge 20+ 
 
    var isEdge = !isIE && !!window.StyleMedia; 
 
    
 
    // Internet Explorer 6-11 
 
    var isIE = /*@[email protected]*/false || !!document.documentMode; 
 
    
 
     
 
var output = 'Detecting browsers:<hr>'; 
 
output += 'isFirefox: ' + isFirefox + '<br>'; 
 
output += 'isChrome: ' + isChrome + '<br>'; 
 
output += 'isEdge: ' + isEdge + '<br><br>'; 
 

 
document.getElementById("browser").innerHTML = output; 
 

 
//if (isChrome==true){ 
 
// \t $(".LoginField").css("visibility","hidden"); 
 
//}
.visible { 
 
    visibility: visible; 
 
} 
 

 
.not-visible { 
 
    visibility: hidden; 
 
} 
 

 
.LoginField{ 
 
    visibility: visible; 
 
}
<p class="visible">The first paragraph is visible.</p> 
 
<p class="not-visible">The second paragraph is NOT visible.</p> 
 

 
<div id="browser"></div> 
 
<div class="LoginField">login fields</div>

+0

什麼你可能缺少的是$(文件)。就緒(函數( ){})你應該把你的if語句包裝進去。 –

+0

@LeoFarmer爲什麼?通過添加'$(document).ready(function(){})',這個函數跟蹤全局的id和class? – KenyKeny

回答

0

你的代碼工作完全按照預期的,只要你有記得包括在頁面上的jQuery。話雖如此,你可以簡單地檢查if (isChrome) - 你不需要檢查它是否等於true。你也不需要CSS來說明.LoginField默認是可見的。

這裏的工作例如,在登錄憑證上的每一個瀏覽器中可見而Chrome:

// Firefox 1.0+ 
 
var isFirefox = typeof InstallTrigger !== 'undefined'; 
 

 
// Chrome 1+ 
 
var isChrome = !!window.chrome && !!window.chrome.webstore; 
 

 
// Edge 20+ 
 
var isEdge = !isIE && !!window.StyleMedia; 
 

 
// Internet Explorer 6-11 
 
var isIE = /*@[email protected]*/ false || !!document.documentMode; 
 

 

 
var output = 'Detecting browsers:<hr>'; 
 
output += 'isFirefox: ' + isFirefox + '<br>'; 
 
output += 'isChrome: ' + isChrome + '<br>'; 
 
output += 'isEdge: ' + isEdge + '<br><br>'; 
 

 
document.getElementById("browser").innerHTML = output; 
 

 
if (isChrome) { 
 
    $(".LoginField").css("visibility", "hidden"); 
 
}
.visible { 
 
    visibility: visible; 
 
} 
 

 
.not-visible { 
 
    visibility: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="visible">The first paragraph is visible.</p> 
 
<p class="not-visible">The second paragraph is NOT visible.</p> 
 

 
<div id="browser"></div> 
 
<div class="LoginField">login fields</div>