Currently I'm using jQuery.browser to detect IE7 and lower
if ($.browser.msie && parseInt($.browser.version) <= 7) {
//codes
}
but jQuery.browser was deprecated in jQuery 1.3 and removed in jQuery 1.9, I read from jQuery website that we should use feature detection instead (jQuery.support).
So, how to detect IE7 and lower using jQuery.support?
The best way is to use conditional comments and check it using jQuery's hasClass().
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
And in your jQuery, check for IE 7:
// Check IE 7
if ($('html').hasClass('ie7');
This method cannot be spoofed no matter what. Also see: Conditional Stylesheets by Paul Irish.
This small function will tell you whether the button code is broken:
function isButtonBroken()
{
var b = document.createElement('button');
b.value = 1;
b.appendChild(document.createTextNode('2'));
return b.value === '12';
}
jQuery.Support does not give you the browser. As of jQuery 1.9 the $.browser function is deprecated. If your after a quick was the easiest way is to use the browsers native navigator object.
//check for IE7
if(navigator.appVersion.indexOf("MSIE 7.")!=-1)
Using Modernizr
//check for IE7 or less
if ($('html').hasClass('lt-ie7');
This is not recommended however as the browser can easily "spoof" this object. Using a library such as Moderizer to feature detect is modern approach. For more details info see: 5+ WAYS TO CHECK IE VERSION USING JAVASCRIPT/JQUERY
As others have said trying to detect a browser version is a bad idea and you should rely on feature detection.
That said the only reliable way to detect an IE browser rendering engine is using conditional comments. You can use this little snippet that'll get it for you:
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
Keep in mind that this will only work in IE versions supporting conditional comments and it will not work in IE10 or above.
A no script solution can be based on giving the button a type of submit and a name that is the value you want to submit. Then, at the server, make the action dependent on the value of the name attribute, not the value, e.g.
<button type="submit" name="whatever" value="Click me 0">Click me 0</button>
Now every browser will submit the button as &whatever=Click+me+0. I don't have IE 7 to test with, but from what you've posted, that should work.
If you have multiple buttons in the form, only the one that is clicked to submit the form will be successful, so only that button's name and value will be submitted.
Of course the simplest of all is to use input type submit, but maybe you can't do that.
U Can detect by using following condition.
if (!$.support.leadingWhitespace) {
//IE7 stuff
}
You cannot detect the browser using jQuery.support.
Rather than checking the browser, you should check the feature of browsers you want to use.
For example, if you want to use ajax feature,
you sould check the presence of XMLHttpRequest object by jQuery.support.ajax
var ajaxEnabled = $.support.ajax;
if (ajaxEnabled) {
// do something
}
jQuery.browser document says that
jQuery.browser may be moved to a plugin in a future release of jQuery.
And also says that
Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.
You can make your own browser-detection code. See below. But keep in mind that this code is vulnerable to spoofing as jQuery document says.
var ua = navigator.userAgent.toLowerCase();
var isOpera : (ua.indexOf('opera') >= 0) ? true : false;
var isFirefox : (ua.indexOf('firefox') >= 0) ? true : false;
var isMSIE : (ua.indexOf('msie') >= 0) ? true : false;
var isMSIE6 : (ua.indexOf('msie 6.0') >= 0) ? true : false;
var isMSIE7 : (ua.indexOf('msie 7.0') >= 0) ? true : false;
var isMSIE8 : (ua.indexOf('msie 8.0') >= 0) ? true : false;
var isMSIE9 : (ua.indexOf('msie 9.0') >= 0) ? true : false;
// and other browsers...
Related
This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?
I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>
I'm detecting the browser version using jQuery and setting CSS based on the browser version.
if ( getBrowserVersion() == '8' ) {
$('head').append('<link href="/css/MSIE8.css" rel="stylesheet" id="MSIECSS8" />');
}
function getBrowserVersion() {
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|wow64|trident(?=\/))\/?\s*(\d+)/i) || [];
if ( /trident/i.test( M[1] ) ) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE ' + ( tem[1] || '' );
}
}
This works when I emulate IE8 in IE11 using F12-developer tools. But it doesn't pick the CSS when I run the website directly on IE8. Any idea on how to make this work? Appreciate your help!
You should avoid all user-agent sniffing, unless it is absolutely necessary. In this case, it is not necessary. If you wish to load a custom stylesheet for Internet Explorer 8, use the features provided by the browser itself, namely Conditional Comments:
<head>
<!--[if IE 8]>
<link href="/css/MSIE8.css" rel="stylesheet" id="MSIECSS8" />
<![endif]-->
</head>
This will be parsed only in Internet Explorer, versions prior to 10. And only in Internet Explorer 8 will it result in the addition of the MSIE8.css stylesheet to the document.
Generally speaking, anything more than this just complicates your project unnecessarily.
I'm creating a button input on the fly with "document.createElement('input')". The button generates fine in all browsers, but the function does not fire in IE 8 (or IE 7) as it does in all other browsers. I tested the code of the function being called in IE 7 & 8 and it works. Does anyone know a way around this browser issue?
Thanks for your help.
<script type="text/javascript">
function killWindow(){
window.open('', '_self', '');
window.close();
}
document.observe("dom:loaded",function(){
var forceCloseButton = document.createElement("input");
forceCloseButton.setAttribute("id","forceClose");
forceCloseButton.setAttribute("type","image");
forceCloseButton.setAttribute("src","SurveyResource/Button-Close");
forceCloseButton.setAttribute("class","button");
forceCloseButton.setAttribute("onclick","killWindow()");
var a=$('datstat_bottomcenterbuttons');
a.appendChild(forceCloseButton);
})
</script>
You should never never set an event handler with setAttribute.
You need to use addEventListener/attachEvent or set onclick directly.
Also setting class is going to have issues, look at className.
I want to test if a particular css property attribute is supported in the browser. For a css property, i can do it like
var overflowSupport = document.createElement("detect").style["overflow-y"] === ""
But what if i have to check for a particular class or attribute. For example, i want to test the support for
overflow-y:auto
and use it for scrolling a large div, where supported, and use iScroll at other places.
How can i do that? Pls help.
Kind of an old question, but I thought I'd share my finds here, especially because the code sample given by Inkbug does not work as you would expect.
Overflow property support
overflow-y has been around since the CSS2.1 times (however it's been standardized pretty recently, in the css3 spec). For that reason, the support on desktop browsers is very decent.
Now, what you're asking here is whether or not the scrolling behavior actually works when we specify overflow-y: scroll on a particular element.
This behavior was introduced fairly recently in mobile browsers. More precisely, Apple introduced it in iOS 5 with a -webkit vendor prefix (see page 176 of Apple's documentation).
I can't find specific info for Android though.
What I can say about support for overflow-scrolling (vendor prefixed or not):
latest nexus7 (Android 4.1.1): yes
Android 2.3.x: no
iOS >= 5: yes
iOS < 5: no
Feature detection for scrolling-overflow
If you want to give scrolling behavior to an element, I would advise using feature detection.
Here's a gist showing how you can detect this scrolling-overflow property (it's been integrated in Modernizr since). If you don't want to use Modernizr, here is a simpler version that does pretty much the same:
/**
* Test to see if overflow-scrolling is enabled.
*/
var hasCSSProperty = function(prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(document.body, null)[prop];
} else {
return document.body.currentStyle[prop];
}
};
var supportOverflowScrolling = function() {
if (hasCSSProperty('overflow-scrolling') ||
hasCSSProperty('-webkit-overflow-scrolling') ||
hasCSSProperty('-moz-overflow-scrolling') ||
hasCSSProperty('-o-overflow-scrolling')) {
return true;
} else {
return false
}
};
When one assigns an invalid value to a dom style, it gets rejected. Therefore this should work:
var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";
Arnaud Brosseau's reply surely deserves the checkmark.
Anyway, consider also using Modernizr.
Using their addTest and testAllProps API functions, you can easily check for any css property support:
Modernizr.addTest('overflow-y',function(){
return Modernizr.testAllProps('overflowY'); /* camel case here */
});
Then you can check it with JavaScript:
if(Modernizr.overflowY){
/* do something if supported */
}
but it will also add a class to the <html> tag, so that you can custom rules on CSS too:
.overflowY #element {
/* style for browsers supporting overflow-y */
}
.no-overflowY #element {
/* style for browsers NOT supporting overflow-y */
}
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
'innerText' works in IE, but not in Firefox
Why the following script work on IE and safari but not in Firefox?
<html>
<head><script type="text/javascript">
function ShowHide(strTag ,strAttribute){
var elem = document.getElementsByTagName(strTag);
var elem1 = evt.srcElement || evt.target;
for (var i=0;i<elem1.children.length;i++){
elem1.children[i].innerText=="4" ? elem1.children
[i].innerText="6":elem1.children[i].innerText="4";
}
for (var i =0;i<elem.length;i++) {
if(elem[i].getAttribute(strAttribute)=="yes") {
elem[i].style.display=='none'? elem[i].style.display='block':elem
[i].style.display='none';
}
}
}
</script>
<div id=div1 onclick="ShowHide('div','exp2');">
<font face=Webdings color=BLACK>4</font> click here for some expandable
divs...</div>
<div id=div2 exp2='yes' style="display:none;">I'm a div!</div>
<div id=div3 exp2='yes' style="display:none;">More of them divs...</div>
<div id=div4 exp2='yes' style="display:none;">Me too! divs...</div>
</body>
</html>
The innerText property does not work on Firefox, that property is IE-specific (although IIRC is supported by Opera/Chrome).
Firefox uses the W3C standard Node::textContent property.
I don't see where "evt" comes from, but event objects are referenced differently in Firefox and IE
Firefox does not have an "innerText" attribute for manipulation
(That "evt" thing makes me wonder how this works even in IE.)
CMS is right but also incomplete.
var elem1 = evt.srcElement || evt.target;
This line fails because 'evt is not defined'
evt is undefined
Unless you're passing in the event object from the onclick handler somewhere not included in your snippet Firefox has no idea what evt is. If you want to find the target in this manner, pass it in as a parameter to the function.