检测 Chrome 和 Edge Chromium 在我的网站上不工作

Question

我遵循了主题 How to detect Safari, Chrome, IE, Firefox and Opera browser? 中提到的说明。

这是我的代码：

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

 if (isEdgeChromium == true) { 
 
 document.getElementById('EdgeChromiumVisible').style.display = 'block';
 
} else if (isEdgeChromium == false) {
 
 document.getElementById('ChromeVisible').style.display = 'block';
 
}

#EdgeChromiumVisible{
    display: none;
}
#ChromeVisible{
    display: none;
}

<div id="ChromeVisible">Chrome user</div>
<div id="EdgeChromiumVisible">Edge Chromium user</div>

该脚本在 JSFiddle 中运行良好。不幸的是，它在我的网站上不起作用。

我确信我遗漏了什么，但我无法弄清楚我做错了什么。有人能指出我正确的方向吗？

Answer 1

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = (window.navigator.userAgent.indexOf("Edge") > -1);

 if (isEdgeChromium == true) { 
 
 document.getElementById('EdgeChromiumVisible').style.display = 'block';
 
} else if (isEdgeChromium == false) {
 
 document.getElementById('ChromeVisible').style.display = 'block';
 
}

#EdgeChromiumVisible{
    display: none;
}
#ChromeVisible{
    display: none;
}

<div id="ChromeVisible">Chrome user</div>
<div id="EdgeChromiumVisible">Edge Chromium user</div>

Answer 2

虽然您粘贴在这里的代码是正确的，但当我实际检查您的网站时，我在您的索引中发现了这个：

<p><script>
// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);</p>
<p>// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);</p>
<p> if (isEdgeChromium == true) { </p>
<p> document.getElementById('EdgeChromiumVisible').style.display = 'block';</p>
<p>} else if (isEdgeChromium == false) {</p>
<p> document.getElementById('ChromeVisible').style.display = 'block';</p>
<p>}
</script></p>

请注意，在每一行破坏您的代码之前添加了一些 p。您也可以在控制台上找到错误，Uncaught SyntaxError: Unexpected token '<'。

更正这些后，您的代码将运行符合预期。

Answer 3

看起来您的代码在 JS 代码中有一些不必要的段落标记导致了这个问题。

我建议您从 JS 代码中删除不必要的 Paragraph 标签。它将帮助您解决问题。
如果您需要在 JS 代码中使用 HTML 标签，那么我建议您尝试正确连接它。
我建议您首先尝试理解示例代码，然后尝试在您的实际代码中实现它。我可以看到您的 JS 代码只是将 CSS class 从 none 更改为 block。您正试图将此 JS 代码放在段落标记中。它不会给您带来任何影响，但会在此处导致错误。所以你也可以删除那些段落标签。无需在该 JS 代码周围包含那些段落标记。

我建议您参考下面的链接，这可能会帮助您详细了解它。

How can i use html tags in javascript
How to assign block of HTML code to a JavaScript variable

检测 Chrome 和 Edge Chromium 在我的网站上不工作

Detection Chrome and Edge Chromium not working at my website

javascript

browser

detect

chromium

microsoft-edge