4

When using Meteor.com anyone know how to detect if the browser's JavaScript is disabled...

AND show a message to the end user in the browser window, i.e "Turn on JavaScript."

Carl Foggin
  • 51
  • 1
  • 1
    possible duplicate of [How to detect if JavaScript is disabled?](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled) – Felix Kling Dec 03 '13 at 05:50
  • 1
    The usual – Carl Foggin Dec 03 '13 at 06:13

3 Answers3

3

I assume that you have a layout.html or at least a main.html that contains at least a <head>.

A trick is to place <noscript> in the <head> instead of the <body>.

Meteor does not render everything in JS. There are some stuff that get's rendered in an initial page, proof of which can be seen in View Source (CTRL+U).

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • 1
    No, Meteor uses handlebars and it's all JavaScript driven via the Meteor server. Here's a thread on Google groups with more info, but no answer. – Carl Foggin Dec 05 '13 at 02:29
  • @CarlFoggin I had a meteor setup when I did this, and it did work with JS disabled. – Joseph Dec 05 '13 at 14:51
  • 3
    @CarlFoggin the template parser in meteor only takes everything thats not in `` when it converts it to javascript. So this should work fine. – Tarang Dec 05 '13 at 14:56
  • 1
    It simply does NOT work, btw, I'm using: $ meteor --version Release 0.6.6.3 -- I tried – Carl Foggin Dec 08 '13 at 00:30
  • @CarlFoggin My meteor is also 0.6.6.3, and it did work in my setup. However, I use [generator-meteor](https://npmjs.org/package/generator-meteor) from [Yeoman](http://yeoman.io/), where it comes with [Iron-Router](https://github.com/EventedMind/iron-router). I use a [global layout](https://github.com/EventedMind/iron-router#global-router-configuration) where my `` is defined. This might be the case. – Joseph Dec 08 '13 at 03:26
  • @CarlFoggin The head tag should *not* be inside a template tag. – Cees Timmerman Jul 29 '15 at 11:24
  • @CeesTimmerman Sure, but this answer is a hack. And browser is kind enough to find duplicate `` tags and puts their content in one `` - the one that's not in body. Besides, **this answer is 2 years old**. Meteor was 0.6 that time. Things may have changed. – Joseph Jul 29 '15 at 12:06
  • @JosephtheDreamer I'm using the latest Meteor in Chrome, and head tags were not merged. Only `` worked for me. – Cees Timmerman Jul 29 '15 at 12:26
  • @CeesTimmerman I guess that's what the answer meant. I should have been clearer :D. – Joseph Jul 29 '15 at 12:50
1

I'm using the latest Meteor in Chrome, and head tags were not merged. Only this worked for me:

<head>
    <noscript>Please enable JavaScript.</noscript>
</head>

<template name="index">
...
</template>
Cees Timmerman
  • 17,623
  • 11
  • 91
  • 124
1

I just used this and it really worked like a charm

<head>
<noscript>
<style>
body {font-size: 32px;text-align: center;line-height: 100vh;}
body:after {content: "Please enable JavaScript";}
</style>
</noscript>
</head>
Olalekan J Makanjuola
  • 71
  • 5