We are in the process of upgrading our React v17 app to v18. Currently we use react-app-polyfill as well as bowser to check if users are using a supported browser, and show a simple alert if they aren't. The app doesn't work properly on IE11 but the alert at least appears.
Now that we don't have any specific requirements to support IE11 it would be nice to remove the polyfill dependency, but obviously nothing within the React app will render without it, alert included.
Aside from the hacky solution of hardcoding text into the index.html root div, does anyone have a simple way of notifying users of a) IE11 and / or b) any unsuitable browser that their browser is not supported?
You may use a <script> tag with nomodule attribute inside your index.html like this:
<script nomodule>
alert('Sorry, you need to upgrade your web browser :(');
// or
window.location.href = 'a static page where you explain what to do';
</script>
This script will only be executed on web browsers that do not support ES Modules, which are Chrome <61, Firefox <60, Safari <11, Edge <16 and all versions of Internet Explorer (to mention only the most common ones).
I'd lean toward Valentin's nomodule approach.
But if you have a reason for not requiring module support, then I'd lean toward:
Doing a feature-check on some JavaScript language feature that you know IE doesn't have but you know your target browsers will have (like class, which is supported by all modern or even semi-modern browsers and markedly predated module support in browsers; but the specific choice is up to you).
If the feature-check fails, add your alert using something other than React.
For example:
function isObsolete() {
try {
(0, eval)("class Example { }");
return false;
} catch (e) {
return true;
}
}
// ...
if (isObsolete()) {
// ...add/perform warning...
}
Related
I am trying to create a document explorer targeted for Edge. For that purpose I am using the msLaunchUri method as follows:
navigator.msLaunchUri('ms-word:ofe|u|http://docServerPath/someFolder/document.docx', function() { console.log("success")}, function() { console.log("error")});
However, the document is never opened. I've tried with different types of office documents, but the outcome is always the same. Is there a way to either fix this or to open the documents in a different way?
I am using Win10 and Edge 42.17134.1.0 (EdgeHTML 17.17134).
Since I don't have the Edge 42 version environment, I have tested your code using Edge 44.18362.1.0 version and Edge 41.16299.1004.0 version, they all will open the documents,
I suggest you check this thread, perhaps the issue is relate to the following registry keys, you could try to remove it.
HKEY_CURRENT_USER\Software\Classes\myprotocol
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\ProtocolExecute\myprotocol
If still not working, please try to reset the browser setting. Also, you could try to upgrade the browser version.
I'm doing Javascript feature support testing on my site, but I'm running into an issue while testing on IE11 that is causing a syntax error (because of a default parameter) prior to executing my feature test.
My application builds a script tag to inject into the layout view. That script tag is built using a configuration that defines all of the JS dependencies. I've ensured that the resulting JS file that's delivered to the browser has my feature detection at the top of the combined script (right after jQuery). But what seems to be happening is that some function that's defined later on in the script is running (or parsed?) prior to running my feature detection expression.
For more clarity, this is an example of what my script tag looks like:
<script type="text/javascript" src="/asset/jscript?load=feature-detection,global,login&version=1820523616"></script>
Which results in a script file that first contains jQuery, then my feature-detection.js, then everything else. This is the line in one of the JS files after feature detection that causes the syntax error:
processMessages: function(problem, container, useMessage = true) {...}
EDIT:
To be clear, I'm unsure why the syntax error would occur before the feature detection logic, even though my feature detection occurs far earlier in the code. This is what my combined script looks like:
/* jQuery v3.2.0 ... */
// This is a placeholder for jQuery code
// Test browser support for 'for...of' statement.
// If this feature is lacking, ES6 support is lacking from the browser
try {
eval("for (var i of []);");
} catch(ex) {
// Show 'Unsupported Browser' banner
alert('GET BETTER BROWSER');
}
// The rest of my JS files, which would contain several non-supported features
processMessages: function(problem, container, useMessage = true) {...}
The "alert" is never triggered in IE11, instead I get "Expected ')'" pointing to the default parameter function
I'm pretty sure you can't use default parameter values in JS like that, that's probably what's breaking in IE.
You'll have to default it like this instead:
processMessages: function(problem, container, useMessage) {
if (typeof useMessage === 'undefined') useMessage = true;
}
Javascript is first compiled then executed, it's a multistage process.
Your syntax error will occur at compilation cycle(or interpret time) which is why you are seeing it before your feature detection executes.
I am not a deep js expert so my terminology might be wrong but that's the idea behind your issue
Is there a way to check whether a browser supports U2F or not?
I know that right now, Chrome is the only browser that officially does U2F, but there are addons for Firefox and there may also be customized browsers which may have gotten U2F.
I don't want to ditch such browsers like Google does, because the addon users wouldn't be able to use it.
I saw that GitHub seems to have a way to see it (because it distinguished between Firefox with and without addon), but I have no idea how to do that.
Use library caniuse-support, which uses information from the service caniuse.com (https://caniuse.com/#feat=u2f) and uses library bowser (browser detector):
const {
getSupport,
currentBrowser,
} = CaniuseSupport;
const test1 = getSupport("u2f"); // current browser
console.log(
"Get feature support of U2F current browser (" +
currentBrowser.id +
" " +
currentBrowser.version +
"):",
test1.level
);
CodePen sandbox
It's 2019 now and there actually have been some interesting improvements to the entire U2F stuff.
The U2F browser API has essentially been replaced by WebAuthn, and while sure that is throwing out some older browsers, there isnt really any relevant older browser that actually supports the U2F API which is still in a lot of use as chrome auto-updates anyway and chromium and its forks are basically the only browsers that natively supported U2F out of the box.
and with the new webauthn, you have functions you can actually check for, based on what I library I use has in an example document:
if (!navigator.credentials || !navigator.credentials.create) {
//try navigator.credentials.get for login instead of create
//tell the user
}
I want to identify if the broswer is IE then goto if block, other browser to else block in Java script.
I have one code here,
var browserName=navigator.appName;
if(browserName == "Microsoft Internet Explorer"){
IE code
}
else{
Other code
}
but i want to know is there any other way of implementing it?
Rather than do browser sniffing, you should do feature detection. Later versions of IE may support standards compliant stuff that in older versions you needed to work around or use MS-specific stuff.
Microsoft themselves have written up about the best way to do this and provide examples of both bad code (via sniffing) and good code (via detection). Make sure you go down the "good code" route.
I just started using this script to identify browser, version, and OS:
http://www.quirksmode.org/js/detect.html
If you are needing to use different code based on browser support for certain objects or methods, it's usually better to use object or method detection instead of browser detection. I use the browser detection for collecting statistics on my users, not for enabling or disabling features.
Quirksmode has a short article about why you don't use browser detection this way: http://www.quirksmode.org/js/support.html It's also linked from the browser detection script.
I found that This task is quite difficult as browsers all have similar names and different userAgent strings, so this is my Conditional statement to identify browsers.
I used this to identify the browser for different style sheets.
function styc()
{
var str = navigator.userAgent;
var res = navigator.userAgent.match(/Trident/);
var res2 = navigator.userAgent.match(/Firefox/);
if(res=="Trident"||res2=="Firefox")
{
//alert(navigator.userAgent);//for testing
document.getElementById('IE_fix').setAttribute("href", "IE_fix.css");
}
else
{
//alert("no");//for testing
document.getElementById('IE_fix').setAttribute("href", "mt_default.css");
}
}
Find a unique word in the userAgent string match it and check if the condition is true or not true depending on what you are doing.
The unique word I found for IE is Trident, and also identifies IE versions according to MicroSoft(not positive on this).
is there a way to disable a certain script for all ie browsers?
You can make use of conditional compilation to determine if the client is using MSIE.
var IE = /*#cc_on!#*/false;
which can be used as
if (IE) {
// IE.
} else {
// Others.
}
Only in IE, the ! will be compiled and taken in the expression, resulting in a new expression !false, which is logically true. This works better than $.browser.msie because it can be fooled by the useragent and also better than document.all because it would affect certain Opera versions as well.
That said, what is it you're trying to disable? You can on the other hand also make use of feature detection. Here's a discussion about this: Browser detection versus feature detection
I wouldn't recommend this, but:
if(!$.browser.msie) {
//non IE script
}
I would fix the script to work in IE, or exclude it based on some feature the browser doesn't support...not just because it's IE. With any browser a feature could be added via an update tomorrow, and your script would still exclude it. See $.support for more on feature detection.
Excluding something from running because "it isn't supported" is a perfectly valid scenario. However, excluding something because "IE doesn't support it...when I wrote this code" isn't a good approach. Instead, check if the feature that you need is present, and the user gets the richest experience possible in their current browser.
You could not include the javascript at all for IE browsers using Microsoft's recommended way of inserting a conditional comment:
<!--[if !IE]>
<script src="myscript.js" type="text/javascript"></script>
<![endif]-->
or simply wrap the code you want to exclude in the comment.
If you're speaking of IE 6, you can crash it by calling this function :
function crash_IE6() {for(x in document.open);}
Seriously, the most use way of deteting IE is checking the presence of document.all... but it still isn't a good thing.
You should nerver check what browser your script is running on... you should just check the presence of the needed methods.