Javascript通过浏览器检测隐藏html表单

Question

我的问题是如何根据用户使用的浏览器隐藏一些html元素。 对于浏览器检测部分，我已经完成。 这些isChrome东西返回“ true”或“ false”，以便在以后的if条件中使用。 我缺少将js if / else部分连接到css以隐藏登录字段的代码，或者还有其他更好的方法做到这一点？

  // 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 = /*@cc_on!@*/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){ // $(".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> 

Answer 1

只要您记得在页面上包含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 = /*@cc_on!@*/ 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>