Question

我有一些代码可以检测访问者正在使用的浏览器。单击按钮时代码运行。我想更改它，以便在网页中间显示："Your browser is Chrome"（或他们正在使用的任何浏览器）。

<p>What is the name(s) of your browser?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction() { 
    if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
        alert('Opera');
    } else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
        alert('Chrome');
    } else if(navigator.userAgent.indexOf("Safari") != -1) {
        alert('Safari');
    } else if(navigator.userAgent.indexOf("Firefox") != -1 ) {
        alert('Firefox');
    } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) { //IF IE > 10
        alert('IE'); 
    } else {
        alert('unknown');
    }
}
</script>

Answer 1

您可以将名称保存到变量中，然后设置元素的文本。这是一个例子：

<p id="demo">Your browser is <span></span>.</p>

<script>
function myFunction() { 
    var browserName;

    if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
        browserName = 'Opera';
    } else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
        browserName = 'Chrome';
    } else if(navigator.userAgent.indexOf("Safari") != -1) {
        browserName = 'Safari';
    } else if(navigator.userAgent.indexOf("Firefox") != -1 ) {
        browserName = 'Firefox';
    } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) { //IF IE > 10
        browserName = 'IE'; 
    } else {
        browserName = 'unknown';
    }

    document.querySelector('#demo > span').innerText = browserName;
}

window.onload = function() {
    myFunction();
}
</script>

Answer 2

使用jQueryUi，您可以使用对话框并将其显示在视口的中心。

(function myFunction() {
        var browserName;

        if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
            browserName = 'Opera';
        } else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
            browserName = 'Chrome';
        } else if(navigator.userAgent.indexOf("Safari") != -1) {
            browserName = 'Safari';
        } else if(navigator.userAgent.indexOf("Firefox") != -1 ) {
            browserName = 'Firefox';
        } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) { //IF IE > 10
            browserName = 'IE';
        } else {
            browserName = 'unknown';
        }

        document.querySelector('#demo > span').innerText = browserName;
        $('#dialog').dialog();
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
    <p id="demo">Your browser is <span></span>.</p>
</div>

Answer 3

关于您的问题：

«单击按钮时代码运行。我想改变它在网页中间显示：“您的浏览器是Chrome”»。

您需要在加载页面时显示此消息。

您可以使用纯 JavaScript 和 CSS3 执行此类操作。

(function() {
  function myFunction() {
    var browser = "";
    if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
      browser = 'Opera';
    } else if (navigator.userAgent.indexOf("Chrome") != -1) {
      browser = 'Chrome';
    } else if (navigator.userAgent.indexOf("Safari") != -1) {
      browser = 'Safari';
    } else if (navigator.userAgent.indexOf("Firefox") != -1) {
      browser = 'Firefox';
    } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) { //IF IE > 10
      browser = 'IE';
    } else {
      browser = 'unknow';
    }
    return browser;
  }
  document.getElementById("demo").children[0].innerHTML = myFunction();
})();

#window {
  background-image: linear-gradient(#fff, #b8d1ea);
  border: solid 1px #b8d1ea;
  border-radius: 10px;
  box-shadow: #2a3848 10px 10px 10px 1px;
  margin: 10px auto; /* Center the div in the middle of the page. */
  padding: 10px;
  width: 400px;
}

<div id="window">
  <p id="demo">Your browser is <span></span>.</p>
</div>

你能不用按钮改变这段代码吗？

3 个答案: