Detection Chrome and Edge Chromium not working at my website

Question

I followed the instructions mentioned in the topic How to detect Safari, Chrome, IE, Firefox and Opera browser?.

This is my code:

// 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>

The script works fine in JSFiddle. Unfortunately it does not work at my website.

I am sure that I am missing something, but I cannot figure out what I am doing wrong. Can someone point me in the right direction?

@RahulDwivedi: Sorry, I am not familiar with console.log. I Googled it, but I don't understand how to print it on console.log for my particular script. Could you tell me how to do this? — Sjoerd, May 24 '20 at 18:03
I inspected the code at your website and found that `
' tags are inserted besides each line in your `script`. That's why you're facing the issue — ABGR, May 24 '20 at 18:38
That's odd. I copy-pasted the script (without
tags) in the HTML-page in WordPress (plain-text view). And there it's viewed without the
tags, as it should be. But somehow when I went to the page-URL in a web browser, the
tags are appearing in the source code in that browser. After I deleted the white lines in the JavaScript code, the
tags disappeared. And even better: The script is now working perfectly! Thanks to you all, for helping me out! — Sjoerd, May 25 '20 at 18:54

score 0 · Answer 1 · answered May 24 '20 at 16:16

0

// 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>

answered May 24 '20 at 16:16

Lamri Djamal

236
1
10

Thanks for your quick reply. :) Unfortunately your code does also not work on my website. And I saw that your code does not recognize/detect Edge Chromium browsers, it thinks that its a Google Chrome browser. The code that I used does recognize/detect Edge Chromium browsers the right way. In JSFiddle my code works fine. The only problem is that the code is not working/loading on my website. – Sjoerd May 24 '20 at 18:10
If you code don't working with you website because you syntax error in the before code. do you can tape CTR+MAJ+I for debug your javascript code – Lamri Djamal May 24 '20 at 19:25
Maby other file code javascript error caused blocking ou script – Lamri Djamal May 24 '20 at 19:31

score 0 · Accepted Answer · answered May 24 '20 at 18:41

While the code that you've pasted here is correct, when I actually inspected your website, I found this in your index:

<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>

Notice some p getting added before each line breaking your code. You can find the error on the console too, Uncaught SyntaxError: Unexpected token '<'.

Once you correct these, your code will run as expected.

That's odd. I copy-pasted the script (without
tags) in the HTML-page in WordPress (plain-text view). And there it's viewed without the
tags, as it should be. But somehow when I went to the page-URL in a web browser, the
tags are appearing in the source code in that browser. After I deleted the white lines in the JavaScript code, the
tags disappeared. And even better: The script is now working perfectly! Thanks to you all, for helping me out! — Sjoerd, May 25 '20 at 18:55

Deepak-MSFT · Answer 3 · 2020-05-25T01:53:47.400

It looks like your code has some unnecessary paragraph tags in the JS code causing this issue.

I suggest you remove the unnecessary Paragraph tags from the JS code. It will help you fix your issue.
If you need to use the HTML tags with the JS code then I suggest you try to properly concatenate it.
I suggest you first try to understand the sample code then try to implement it in your actual code. I can see that your JS code is just changing the CSS class from none to block. You are trying to put this JS code within a paragraph tag. It will not give you any effect but it will cause the error here. So you can also remove those paragraph tags. There is no need to include those paragraph tags around that JS code.

I suggest you refer to the links below that may help you to get a detailed idea about it.

That's odd. I copy-pasted the script (without
tags) in the HTML-page in WordPress (plain-text view). And there it's viewed without the
tags, as it should be. But somehow when I went to the page-URL in a web browser, the
tags are appearing in the source code in that browser. After I deleted the white lines in the JavaScript code, the
tags disappeared. And even better: The script is now working perfectly! Thanks to you all, for helping me out! — Sjoerd, May 25 '20 at 18:55

Detection Chrome and Edge Chromium not working at my website

3 Answers3