Add <noscript> support to Meteor?

core
1

Is there any possibility to add a <noscript> tag to the body? Or some other way to detect disabled / not supported JavaScript?
By default, a blank page is rendered, which is not really helpful.

On StackOverflow it is recommended to put a <noscript> tag inside the head. This works (at least with Chrome), but apparently text (or <p> or <div>) is not allowed inside a head <noscript>. The validator says:

Non-space character inside noscript inside head.

This was discussed (but not solved) on GitHub as well. In the referenced issue they solved it by using WebApp.addHtmlBodyHook:

 WebApp.addHtmlBodyHook (request) ->
  '<noscript>PeerLibrary requires JavaScript enabled.</noscript>'

Unfortunately this API is not available anymore (I use Meteor 1.1).

Any suggestions? Or should I just go with the head <noscript> (and ignore validation)?
I can imagine that many apps could benefit from an “official” (and valid) API for this though.

Thanks in advance!

2 Likes
2

Hi, try this :

    <head>
    <title>meteor-noscript</title>
    <style>
        body{
            background-image: url('http://www.quickmeme.com/img/e4/e474b75342e5a27b7cdcf3ce8f897908bd4f40b06208803f6e795018d823adcd.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }

        .has-script{
            background-image: none;
        }
    </style>
</head>

<body class="has-script">
<h1>Welcome to Meteor!</h1>

{{> hello}}
</body>

Demo (tested Firefox : noscript addon or browser disabled js) : http://noscript.meteor.com/

1 Like
3

Thank you very much! I didn’t know I could use a body class in this way.

This is the SCSS I ended up using:

body:not(.has-script) {
  margin-top: 100px;
  text-align: center;
  font-size: 20px;

  &::before {
    content: "Please enable JavaScript!";
  }
}

Works like a charm and seems clean to me ^^

1 Like
4

Without changing anything in the body, you can simply put this in the <head>

<noscript>
	<style>
		body {
			font-size: 32px;
			text-align: center;
			line-height: 100vh;
		}
		body:after {
			content: "Please enable JavaScript in your browser to view this site.";
		}
	</style>
</noscript>

The <style> tag inside <noscript> won’t load if the browser has JavaScript enabled.

4 Likes
5

Hi, I have a meteor + react app and I can’t find a way to add a noscript message.
I only have js files in my app… Where can I add the noscript tag ? Is there anything embedded in meteor ?

Anyone can help me ?

Thanks

6

I found the solution, I added this in server/main.js

Inject.rawHead('noscript', '<noscript><style>body {font-size: 32px;text-align: center;line-height: 100vh;}body:after {content: "Please enable JavaScript in your browser to view this site."}</style></noscript>')
7

Oh my god, 5 years. :grinning: :grinning: :grinning: :grinning: