Check for HTML5 with JS

Question

I have a page that contains some JS to update the browser history (pushState(), using HTML5). As IE8 does not support HTML5 users are being told that the page contains an error. While this doesn't deminish the functionality of the page, it doesn't look very professional, so I'm wondering if there is a check to see if the users browser supports HTML5 before running this code?

<script type="text/javascript">
/** Update history.state() (for back/forward links) */
var object = {
    ajax_string: '<?php echo make_ajax_string(); ?>',
    security: '<?php echo wp_create_nonce('updated-page-nonce'); ?>',
};
window.history.replaceState(object, '<?php echo $post->post_title; ?>', '<?php echo get_permalink($post->ID); ?>');
</script>

Thanks.

James Allardice · Accepted Answer · 2011-10-26 08:58:10Z

9

You can check if the replaceState method is available before running the code:

if(window.history.replaceState) {
    //Your code
}

If replaceState is undefined (which will be the case in browsers that do not support it) then the statement evaluates to false and the code is not executed.

answered Oct 26, 2011 at 8:58

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fenton Over a year ago

+1 - Feature detection FTW. seems a bit overkill to use Modernizr just for this.

David Gard Over a year ago

@James Many thanks, as a quick fix this has solved the problem.

Ian Devlin Over a year ago

Even though I suggested Modernizr, I agree!

Ian Devlin · Accepted Answer · 2011-10-26 08:56:28Z

6

I would suggest using Modernizr.

answered Oct 26, 2011 at 8:56

Ian Devlin

18.9k6 gold badges59 silver badges73 bronze badges

2 Comments

David Gard Over a year ago

Thanks Ian, this looks good but may be a little over the top for where I am right now. Will bear in mind for the future though.

Ian Devlin Over a year ago

Ah, fair enough if you're only looking for one specific thing then I agree it's over the top.

Simone · Accepted Answer · 2011-10-26 08:59:20Z

1

You can use Modernizr to check if new HTML5 History APIs (pushState, replaceState, popState) are supported by the browser, or use History.js to have full cross-browser compatibility.

answered Oct 26, 2011 at 8:59

Simone

21.6k15 gold badges84 silver badges112 bronze badges

Comments

vzwick · Accepted Answer · 2011-10-26 09:05:20Z

1

I would suggest:

if (!!(window.history && history.replaceState)) {
    // has replaceState support
}

answered Oct 26, 2011 at 9:05

vzwick

11.1k5 gold badges47 silver badges63 bronze badges

Collectives™ on Stack Overflow

Check for HTML5 with JS

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related