Script is displaying text on both occasions

Question

I'm trying to display text when a user is using adblock; I am using the following script;

ads.js

<script>var canRunAds = true;</script>

index.php

<script data-rocketsrc="ads.js" type="text/rocketscript"></script>
<script type="text/rocketscript">
  if( window.canRunAds === undefined ){
    var x = "Adblock is enabled, Please disabled to continue.";
    document.write (x);
  }
</script>

However the problem I've been having is that the text is being displayed when the variable is defined and when its not defined.

`if (typeof window.canRunAdds === 'undefined'){` would I use it like this? @Jacques — , Jul 26 '16 at 14:49
@LewisDay If you set `window.canRunAds` to `true` in `ads.js`, what result does that give? — James Monger, Jul 26 '16 at 14:57
@JamesMonger it would display nothing; so if the `window.canRunAds` is undefined i would want it to display the text and if it is defined as true to display nothing — , Jul 26 '16 at 14:58
@JamesMonger, yes, that's how you'd use it. Also, you may just want to check that canRunAdds is not true. so do `if (canRunAdds !== true) // do stuff` — Jacques ジャック, Jul 26 '16 at 15:05

score 1 · Accepted Answer · answered Jul 26 '16 at 15:01

In ads.js, set window.canRunAds. You'll also need to use typeof to check for undefined.

ads.js

window.canRunAds = true;

index.php

<script src="/ads/ads.js"></script>
<script>
  if (typeof window.canRunAds === 'undefined') {
    var x = "Adblock is enabled, Please disabled to continue.";
    document.write (x);
  }
</script>

Patrick Roberts · Answer 2 · 2016-07-26T15:48:33.880

Notice

In case it wasn't clear, the first inline <script> in each of these examples should be replaced with <script src="/ads/ads.js"></script> in order to work. I just can't do that here.

tl;dr

On the website, your ads.js file is loaded asynchronously using data-rocketsrc="ads.js". Replace this with src="ads.js" to load it synchronously before the next inline script executes. Your page (omitting the CloudFlare) should look like this:

<html>

<head>
  <title>Test Adblock</title>
  <script src="ads.js"></script>
</head>

<body>
  <script>
    'use strict';
    if (typeof canRunAds === 'undefined') {
      document.write('canRunAds is being blocked<br/>');
    }
  </script>
</body>

</html>

And the content of https://flamingocams.com/ads/ads.js should be:

var canRunAds = true;

Currently it has the contents:

<script>var canRunAds=true;</script>

I will admit I'm no expert in rocketscript, but my guess is that the running context of the script using that preprocessor is not window. Run it as regular JavaScript to guarantee synchronous execution in the window context.

Answer

Simply use typeof canRunAds === 'undefined'. There is no need to use window.canRunAds, since typeof suppresses any possible ReferenceError when checking an undeclared variable, even in strict mode:

<script>
  'use strict';
  var canRunAds = true;
  // to demonstrate the conditional `if` works
  // var someOtherFlag = true;
</script>

<script>
  'use strict';

  if (typeof canRunAds === 'undefined') {
    document.write('canRunAds is being blocked<br/>');
  }
  
  if (typeof someOtherFlag === 'undefined') {
    document.write('someOtherFlag is being blocked<br/>');
  }
</script>

However, it's generally a more common practice to have an element on the page that's conditionally visible based on CSS like this:

p.adblock-warning {
  display: none;
  color: red;
}

body.adblock p.adblock-warning {
  display: initial;
}

<script>
  // assume this couldn't run
  // var canRunAds = true;
</script>

<script>
  if (typeof canRunAds === 'undefined') {
    document.body.classList.add('adblock');
  }
</script>

<p class="adblock-warning">Adblock is enabled, Please disabled to continue.</p>

@LewisDay Do they work when you run them here? They work for me. Please be more specific about how they don't work. I made the script inline since there is no option to create external scripts on the fly in stack snippets. The first script in each example should be replaced with `` when you reproduce them on your server. — Patrick Roberts, Jul 26 '16 at 15:19
give me to seconds i will provide you with a link; neither of them work when run — , Jul 26 '16 at 15:22
@LewisDay your `ads.js` file is written as HTML, not JavaScript. The content should be `var canRunAds=true;`, not ``! — Patrick Roberts, Jul 26 '16 at 15:28
I have amended this issue and still no luck; I really do appreciate the help. And i can feel your struggle ahah — , Jul 26 '16 at 15:30
@LewisDay also, if you want to continue using rocketscript, see [this answer](http://stackoverflow.com/a/10611827/1541563). Again, I'm not an expert on it, but in this use-case I see no point in using rocketscript. — Patrick Roberts, Jul 26 '16 at 15:56

score -1 · Answer 3 · answered Jul 26 '16 at 14:47

As Jacques already pointed out, use the typeof operator when checking for undefined variables. See https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/typeof.

In your code, one would check window.canRunAds with

typeof(window.canRunAds) === 'undefined'

because we can be sure, that the parent object window definitely is defined in your context. If it would be an object of which we do not know, first check for typeof(window) === 'undefined' to not getting an error.

Cheers!

Script is displaying text on both occasions

3 Answers3

Notice

tl;dr

Answer