Fallback for localstorage using modernizr - javascript

I am using localstorage for store data and it does not work will on IE7. So I am using modernizr for detecting its support to browser. But I want to add fallback on IE7. In IE7 case where can I find fallback function for localstorage for IE7. I mean what need to done when it falls into false condition.
if(Modernizr.localstorage) {
alert(0)
} else {
//function
}

Modernizr doesn't actually shim anything, it just detects wether or not a feature is supported. You can combine it with yepnope to conditionally load the local-storage-js polyfill to fallback appropriately.

Related

Recommended method for recognising Browser's HTML5 capability?

var isH5 = !! document.createElement('canvas').getContext
Would you say, that above JS code snippet is a good method of recognising a Browser's HTML5 capability?
Also see What is the !! (not not) operator in JavaScript? in case of IE quirks mode, it should still return false.
Update: Thanks for all the Modernizr links, we are using above recognising logic in conjunction with Modernizr already.
The better solution is to use something Modernizr to detection .Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. If there isnt support, it returns false
if (Modernizr.canvas) {
// logic
} else {
// your message
}

how to detect browser supports HTML5 microdata API

I use the following code to check for HTML5 microdata API support
function supports_microdata_api() {
return !!document.getItems;
}
but this is not working properly. How can I solve this problem?
Use Modernizr, so you can test it like this:
if (Modernizr.microdata) {
// Yay, microdata is supported!
}
Nonetheless Chrome and Safari don't seem to support this semantic syntax anymore.

How to get browser "Document Mode"

I am developing some kind of JavaScript library. And i cause the problem that i have some specific issues for:
Browser : IE8 / IE9 and Document Mode : IE7
I found the solution, but i don't want to use it in all situation, and want to use it just when i have the situation described above. I know that I can recognize browser by using:
return navigator.userAgent.toLowerCase().indexOf('MSIE 8') > -1;
But i recognize just browser version in such way but not the document mode, and i don't want to use my solution when I have, for example, browser mode IE8 and document mode IE 8.
Is there a way to get page document mode in IE? Thanks in advance.
You can use document.documentMode to return exactly what document mode IE is using.
Meaning that if you have your browser mode set to IE9, but your document mode to IE8 it will return document.documentMode == 8 (while the userAgent string will still show up as IE9). This is particularly useful if your JS ever includes styling changes as it is the document mode that determines how IE renders a page, not the browser mode. Compatibility mode really just changes the document mode (usually to IE7).
In the few cases I've needed to I've just used something like this to differentiate IE's:
if (document.documentMode == 7) {
doSomethingIn.IE7_only;
} else {
doSomething.everwhereElse;
}
Hope that helps some.
I don't know how to retrieve the document mode1, but it may be wise to address the problem in a more basic way. Let's say you wanted to use document.querySelector in your scripting. That would fail in IE8/document mode IE7 Standards. So an additional check for the existence of document.querySelector itself would be the solution:
return ~navigator.userAgent.toLowerCase().indexOf('MSIE 8')
&& document.querySelector; //=> IE8 and Docmode IE7 => false
1 Found a way to check for document mode: use document.documentMode. It returns an integer (so 7 for document mode IE7 standards), 5 for Quirks mode. It will be undefined for non IE browsers.

how to ensure the browser can support **{get X() {}}**

i refuse to use __defineProperty__ and instead prefer the alternative syntax {get X() {}}
However this will not work on IE.
Aside from browser detection, what is the best way i can detect that a browser supports the newer syntax?
Edit: ok actually im not trying to detect IE in particular but redirect those "browsers that do not support get X(){} syntax" to notsupported.html. I believe that there's some way to do it and am working on it but in case someone already has this problem before and had a solution..
Edit 2: btw doesn't that mean that no one (erm other than me) uses the get X(){} syntax since its not supported by all (or not supported by the 5 major browsers yet) ?
As others have noted, you cannot force older (current!) browsers to accept newer syntax. And what would you do with browser detection? Use the old syntax for the old browsers and new syntax otherwise? Then you're writing the same code twice.
Decide on a set of browsers you need to support, determine what features they can all guarantee to you, then limit yourself to those features. That's how web development works.
You want to use an ES5 feature that is not commonly implemented.
You want to use syntax that common javascript interpreters cannot recognise.
There is no way to emulate it.
I recommend you just use
{
getX: function() { ... }
}
If you check the benchmark. Then you'll see using ES5 is 15 times slower. Just stick with ES3.
There is little you can do about this as there is no way to emulate getters in IE8.
Try this:
function browserSupportsGetterAndSetterSyntax() {
try {
return eval('({ get x() { return 3; }}).x') == 3;
} catch (e) {
return false;
}
}

Detect version of the plugin in Chrome browser

I have NPAPI plugin and I want to detect its version before I embed it into web page. If version is not the latest one I want to show some message that asks users to update the plugin.
Now it's implemented in the following way
if (navigator.mimeTypes && navigator.mimeTypes["application/myplugin"]) {
{
// some code here
if(navigator.plugins["myplugin"] && navigator.plugins["myplugin"].version >= latest_version) {
// we have the latest version (embed the plugin into web page)
document.write ("<object id='plugin'><embed ....></object>");
} else {
document.write ("Show message here");
}
// some code
}
The problem is that navigator.plugins["myplugin"].version works fine in Firefox but not in Chrome. Chrome doesn't expose version property. I can add my own property in NPAPI code, but I don't see the way I can use it before embedding the plugin into page.
Is there any workaround?
Thanks in advance, Andrew
I see a lot of plugins have version information in either the name or the description. You should be able to access that information before the embed.
I actually put the version number in the filename, rather than even the name or description. The reason for this is that if there are multiple plugins with the same name, description, and mimetypes Firefox will generally use the latest version. Older versions of firefox have been inconsistent in how they handle this, so I even usually put the np???_version.dll file in a version-specific subdirectory.
It is a little bit of a pain, but it works consistently the same way in every NPAPI browser.
You can create a JSAPI property of your plugin containing the version. This property returns the plugin's version when called from javascript. So when you try to insert/embed the plugin in the page, you can check through javascript to make the appropriate calls.

Categories