i create a javascript webapp based on Extjs 4.2. A lot of feature of this framework doesn't work correctly with IE8 (and i don't know the result with previous versions). I'm searching the more clean way to block the access of my web app using user agent like IE8 or lesser from displaying a message and avoid the login to the webapp.
Anytype of help is usefull
if( ! Ext.isIE6 || ! Ext.isIE7 ) {
yourapp.init();
} else {
//show the element that directs people to http://browsehappy.com/
}
I wouldn't block access, I would show a message that says features in this application may not function correctly. Denying access is bad. If you want easy IE8 detection checkout Conditionizr and the IE8 detect (I created it):
/*!
* IE8
* #cc_on Conditional Compilation to test the
* JavaScript versions
*/
conditionizr.add('ie8', [], function () {
var version = false;
/*#cc_on if (#_jscript_version > 5.7 && !/^(9|10)/.test(#_jscript_version))
version = true #*/
return version;
});
This gives you:
if (conditionizr.ie8) {
// stuff for ie8
}
conditionizr.on('ie8', function () {
// callbacks
});
Plus you can load polyfills/other assets. Perhaps you can load Ext.js for non-IE8 so that the app doesn't break, it just doesn't serve instead.
With Conditionizr you can ignore browsers too using !:
conditionizr.on('!ie8'[, callback]);
Just use one of IE's conditional statements within your markup:
<html>
...
<body>
<!--[if lte IE 8]>
<p>Notice: As you are using an old browser some features of this
web app may not work for you. Please update.</p>
<![endif]-->
...
</body>
</html>
Anything contained within the <!--[if lte IE 8]> block here targets any version of Internet Explorer less than or equal to IE8.
Related
We want to avoid problems with non-supported browsers in our svelte/sapper application.
1. Problem: Detect Internet Explorer
I want to warn users that our application written in Sapper/Svelte is not compatible with Internet Explorer. It can be simple plain-text message or redirect to some error page.
What I want in case of message is to stop execution of any further code after displaying warning message.
If redirect will be chosen then stopping execution is not needed.
Now I have this code
<head>
...
<!-- IE10+ will switch to IE9 behaviour and will respect IE HTML conditional tags -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
...
</head>
<body>
<![if !IE]>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
<![endif]>
<!--[if IE]>
<h1 style="color: #333; font-family: 'Arial'; font-size: 18px; padding: 24px 18px; text-align: center;">
We do not support Internet Explorer.
</h1>
<p style="font-size: 46px; text-align: center; padding: 12px 0;">:/</p>
<![endif]-->
</body>
in the template.html file. Will this be enough to detect all IE browsers (with old engine)?
2. Problem: Detect any other missing feature on run-time
I was thinking that detecting the IE may not be enough for proper browser compatibility detection. Is there some universal Svelte compatibility detection function that I can use?
I still want some last-resort block of code that if application will crush in runtime on SOME not supported feature (local storage, spread operator, service worker, ...) than i want to display message or redirect user to error page.
UPDATE: I used IE conditional tags with meta tag. If there will be requirement to better detect browser features I would implement it in form of tests that would be performed during app initialisation.
The rollup sapper template includes support for "legacy mode". It's not documented anywhere but it creates separate javascript files for older browsers using babel. If you are using this ES6 syntax shouldn't cause problems, if babel is configured appropriately. Your site should still function without a service worker. For other features, such as local storage, I would test for specific features as required and try to fail gracefully.
If you are curious here is the code Sapper uses to detect legacy browsers and load the appropriate js files:
(function() {
try {
eval("async function x(){}");
var main = "${main}"
} catch (e) {
main = "${legacy_main}"
};
var s = document.createElement("script");
try {
new Function("if(0)import('')")();
s.src = main;
s.type = "module";
s.crossOrigin = "use-credentials";
} catch (e) {
s.src = "${req.baseUrl}/client/shimport#${build_info.shimport}.js";
s.setAttribute("data-main", main);
}
document.head.appendChild(s);
}());
You're using conditional comment to detect IE which is not supported by IE 10 and 11. If you want to detect all IE version, you could execute the function below at the beginning of the app:
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
// If you want to redirect
window.location.href = "http://www.example.com";
}
For the features, I don't find API in Svelte to detect them all. I think you can use JavaScript to detect the support of the features when you need.
Is it possible to configure the erb page to detect IE version and based on that select different compatibility tags, so it should work as:
if user IE=10 then
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" / >
else
Please don't propose other solutions as I need exactly the logic I described.
We have an application which doesn't work in IE10 and all the solutions we tried don't work except and only with IE=EmulateIE9 it works.
Does the application work in IE11 or Microsoft Edge? If not, then you could force all Microsoft browsers to emulate IE9 using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">.
If you need to target IE10 specifically, then you should use feature detection, since IE10+ no longer supports conditional comments and user agent sniffing can be unreliable.
Here's a code snippet which identifies the browser by checking for version-specific CSS properties. It's a simplified version of a solution that I found here. I've tested it in IE9, 10, 11 and Microsoft Edge:
<!DOCTYPE html>
<html>
<head>
<title>Browser Detection</title>
</head>
<body>
<h1>Browser Detection</h1>
<h2 id="message"></h2>
<script>
var message = document.getElementById('message');
var browser = "Less than IE10 (or not IE at all)";
if (document.body.style['msTouchAction'] != undefined) {
browser = "IE10";
}
if (document.body.style['msTextCombineHorizontal'] != undefined) {
browser = "IE11 or higher";
}
message.innerHTML = browser;
</script>
</body>
</html>
The above snippet may not work for your purposes because the Javascript gets executed in the body, after the meta tags in the head have already been parsed.
I suppose you could trigger a page redirect for IE10+ browsers and add an argument to the URL, which would prevent the feature detection Javascript from executing the next time (you don't want to create an infinite loop). A quick example:
<script>
if (!document.location.search) {
if (document.body.style['msTouchAction'] != undefined) {
// Browser is IE10 or higher
window.location = "http://www.yoururl.com/?ie9mode";
}
}
</script>
An even better solution would be to store the result of the browser detection script in a session variable, so that you wouldn't need to append anything to the URL.
I hope this helps!
I'm trying to check if a person is using anything IE with version less than 8 or anything else.
I use conditional comments to declare boolean..
<!--[if lt IE 8]>
<script type="text/javascript">var badIE = true;</script>
<![endif]-->
And now I check in my js file the boolean like this:
if (badIE == true){
alert('You have bad IE!');
} else {
alert('Bueno!');
}
If I use IE7 or IE6, it alerts that "You have bad IE!". If I use anything else, it should alert "Bueno!", but it does not. What is the problem?
You need to declare the badIE variable as false first in order for it to work, or else the code outside of the conditional knows nothing about badIE
Try this:
<script>
var badIE = false;
</script>
<!--[if lt IE 8]>
<script type="text/javascript">badIE = true;</script>
<![endif]-->
<script>
if (badIE == true){
alert('You have bad IE!');
} else {
alert('Bueno!');
}
</script>
Not a direct answer (Neal has you covered), but you may also be interested in: http://code.google.com/p/ie7-js/
From the page: IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Though if you're using jQuery, keep in mind that it does many of the same things as this library.
Your conditional statement <!--[if lt IE 8]> ... <![endif]--> means that the code between those will not be executed if the web browser is not an IE version less than 8, which means var badIE will never be declared for all other browsers (i.e., FireFox, IE8, IE9, Safari, etc.)
Because it is never declared, you are getting a silent scripting error in the background when the browser tries to execute if (badIE == true){, which means the browser immediately stops reading the script and does not try to execute the alert('Bueno!'); statement.
How can I hide a div with javascript if the browser is firefox only?
To check Firefox browser
//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
document.getElementById("divId").style.display="none";
}
<!-- HTML-->
<div id="divId" />
Just check a FF-specific JavaScript property. E.g.
var FF = (document.getBoxObjectFor != null || window.mozInnerScreenX != null);
if (FF) {
document.getElementById("divId").style.display = 'none';
}
This is called feature detection which is preferred above useragent detection. Even the jQuery $.browser API (of which you'd have used if ($.browser.mozilla) for) recommends to avoid useragent detection.
“Is the browser Firefox” is almost always the wrong question. Sure, you can start grovelling through the User-Agent string, but it's so often misleading that it's not worth touching except as a very very last resort.
It's also a woolly question, as there are many browsers that are not Firefox, but are based around the same code so are effectively the same. Is SeaMonkey Firefox? Is Flock Firefox? Is Fennec Firefox? Is Iceweasel Firefox? Is Firebird (or Phoenix!) Firefox? Is Minefield Firefox?
The better route is to determine exactly why you want to treat Firefox differently, and feature-sniff for that one thing. For example, if you want to circumvent a bug in Gecko, you could try to trigger that bug and detect the wrong response from script.
If that's not possible for some reason, a general way to sniff for the Gecko renderer would be to check for the existence of a Mozilla-only property. For example:
if ('MozBinding' in document.body.style) {
document.getElementById('hellononfirefoxers').style.display= 'none';
}
edit: if you need to do the test in <head>, before the body or target div are in the document, you could do something like:
<style type="text/css">
html.firefox #somediv { display: none }
</style>
<script type="text/javascript">
if ('MozBinding' in document.documentElement.style) {
document.documentElement.className= 'firefox';
}
</script>
if(document.body.style.MozTransform!=undefined) //firefox only
function detectBrowser(){
....
}
hDiv = .... //getElementById or etc..
if (detectBrowser() === "firefox"){
hDiv.style.display = "none"
}
You might try Rafeal Lima's CSS Browser Selector script. It adds a few classes to the HTML element for OS, browser, js support, etc. You can then use these classes as hooks for further CSS and/or JS. You might write a CSS (or jQuery) selector like html.gecko div.hide-firefox once the script has run.
I need to detect not only the browser type but version as well using jQuery.
Mostly I need to find out if it is IE 8 or not.
I am not sure if I am doing it correctly.
If I do :
if (jQuery.browser.version >= 8.0) {
dosomething}
I am not sure it will work for version 8.123.45.6 or will it?
Edit: Note that JQuery 2+ has dropped support for IE8 and below, and therefore can no longer be used to detect IE8. If using a current version of JQuery, it is necessary to use a Non-JQuery solution.
I think the best way would be this:
From HTML5 boilerplate:
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
in JS:
if( $("html").hasClass("ie8") ) { /* do your things */ };
especially since $.browser has been removed from jQuery 1.9+.
This should work for all IE8 minor versions
if ($.browser.msie && parseInt($.browser.version, 10) === 8) {
alert('IE8');
} else {
alert('Non IE8');
}
-- update
Please note that $.browser is removed from jQuery 1.9
It is documented in jQuery API Documentation. Check for Internet Explorer with $.browser.msie and then check its version with $.browser.version.
UPDATE: $.browser removed in jQuery 1.9
The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.
Don't forget that you can also use HTML to detect IE8.
<!--[if IE 8]>
<script type="text/javascript">
ie = 8;
</script>
<![endif]-->
Having that before all your scripts will let you just check the "ie" variable or whatever.
document.documentMode is undefined if the browser is not IE8,
it returns 8 for standards mode and 7 for 'compatable to IE7'
If it is running as IE7 there are a lot of css and dom features that won't be supported.
Assuming...
...that it's the crunky rendering engine of old versions of IE you're interested in detecting, to make a style look right in old IE (otherwise, use feature detection)
...that you can't just add conditional comments to the HTML - e.g. for JS plugins that can be applied to any page (otherwise, just do the trick of conditional classes on <body> or <html>)
...then this is probably the best trick (based on this non-jQuery, slightly less flexible variant). It creates then tests for then removes an appropriate conditional comment.
(Conditional comments are ignored in IE10+ 'standards mode' - but that should be fine since IE10+ 'standards mode' doesn't have a crazy rendering engine!)
Drop in this function:
function isIE( version, comparison ){
var $div = $('<div style="display:none;"/>');
// Don't chain these, in IE8 chaining stops some versions of jQuery writing the conditional comment properly
$div.appendTo($('body'));
$div.html('<!--[if '+(comparison||'')+' IE '+(version||'')+']><a> </a><![endif]-->');
var ieTest = $div.find('a').length;
$div.remove();
return ieTest;
}
Then use it like this:
if(isIE()){ /* runs in all versions of IE after 4 before standards-mode 10 */ }
if(isIE(8)){ /* runs in IE8 */ }
if(isIE(9)){ /* runs in IE9 */ }
if(isIE(8,'lte')){ /* runs in IE8 or below */ }
if(isIE(6,'lte')){ /* if you need this, I pity you... */ }
I'd also suggest caching the results of this function so you don't have to repeat it. For example, you could use the string (comparison||'')+' IE '+(version||'') as a key to store and check for the result of this test in an object somewhere.
Note:
1) $.browser appears to be dropped in jQuery 1.9+ (as noted by Mandeep Jain). It is recommended to use .support instead.
2) $.browser.version can return "7" in IE >7 when the browser is in "compatibility" mode.
3) As of IE 10, conditional comments will no longer work.
4) jQuery 2.0+ will drop support for IE 6/7/8
5) document.documentMode appears to be defined only in Internet Explorer 8+ browsers. The value returned will tell you in what "compatibility" mode Internet Explorer is running. Still not a good solution though.
I tried numerous .support() options, but it appears that when an IE browser (9+) is in compatibility mode, it will simply behave like IE 7 ... :(
So far I only found this to work (kind-a):
(if documentMode is not defined and htmlSerialize and opacity are not supported, then you're very likely looking at IE <8 ...)
if(!document.documentMode && !$.support.htmlSerialize && !$.support.opacity)
{
// IE 6/7 code
}
If you fiddle with browser versions it leads to no good very often. You don't want to implement it by yourself. But you can Modernizr made by Paul Irish and other smart folks. It will detect what the browser actually can do and put apropriate classes in <html> element. However with Modernizr, you can test IE version like this:
$('html.lt-ie9').each() {
// this will execute if browser is IE 8 or less
}
Similary, you can use .lt-ie8, and .lt-ie7.
You should also look at jQuery.support. Feature detection is a lot more reliable than browser detection for coding your functionality (unless you are just trying to log browser versions).
You can easily detect which type and version of the browser, using this jquery
$(document).ready(function()
{
if ( $.browser.msie ){
if($.browser.version == '6.0')
{ $('html').addClass('ie6');
}
else if($.browser.version == '7.0')
{ $('html').addClass('ie7');
}
else if($.browser.version == '8.0')
{ $('html').addClass('ie8');
}
else if($.browser.version == '9.0')
{ $('html').addClass('ie9');
}
}
else if ( $.browser.webkit )
{ $('html').addClass('webkit');
}
else if ( $.browser.mozilla )
{ $('html').addClass('mozilla');
}
else if ( $.browser.opera )
{ $('html').addClass('opera');
}
});
Here is the Jquery browser detect plugin to identify browser/os detection.
You can use this for styling purpose after including the plugin.
$("html").addClass($.os.name);
$("body").addClass($.browser.className);
$("body").addClass($.browser.name);
You can use $.browser to detect the browser name. possible values are :
webkit (as of jQuery 1.4)
safari (deprecated)
opera
msie
mozilla
or get a boolean flag: $.browser.msie will be true if the browser is MSIE.
as for the version number, if you are only interested in the major release number - you can use parseInt($.browser.version, 10). no need to parse the $.browser.version string yourself.
Anyway, The $.support property is available for detection of support for particular features rather than relying on $.browser.