“document.createElement('script').onError” always executes with local fuckadblock script, but not with identical script on cdnjs.cloudflare.com

问题

Background

I have a hook that uses fuckadblock. This is the code for the hook and it works correctly. It detects adblock when adblock is on, and does not detect adblock when adblock is not on. It calls a script from a server, but I want to store the script and run fuckadblock locally. I'm using the Gatsby framework.

import { useEffect } from 'react'

/**
 * Detects of addBlock is enabled
 * @param addBlockDetected What to do when addBlock is detected
 */
export default function(addBlockDetected) {
  useEffect(() => {
    if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
      // If this is the case, it means that something tries to usurp are identity
      // So, considering that it is a detection
      addBlockDetected();
    } else {
      // Otherwise, you import the script FuckAdBlock
      var importFAB = document.createElement('script');
      importFAB.onload = function() {
        // If all goes well, we configure FuckAdBlock
        fuckAdBlock.onDetected(addBlockDetected)
        // fuckAdBlock.onNotDetected(adBlockNotDetected);
      };
      importFAB.onerror = function() {
        // If the script does not load (blocked, integrity error, ...)
        // Then a detection is triggered
        addBlockDetected(); 
      };
      importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
      importFAB.crossOrigin = 'anonymous';
      // importFAB.src = '../js/fuckadblock.js';
      importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
      document.head.appendChild(importFAB);
    }
  }, [])
}

Problem

I've tried copying the script at https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js saving it to a local file and using npm install fuckadblock. I then change importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js'; to importFAB.src = 'path/to/fuckadblock.js';

When I do this, it looks like this function is always executed

      importFAB.onerror = function() {
        // If the script does not load (blocked, integrity error, ...)
        // Then a detection is triggered
        addBlockDetected(); 
      };

This means that it detects that adblock is on regardless of whether adblock is turned on or turned off.

I want to store the script locally, and only have adblock detected if adblock is actually enabled.

Update

I tried updating my script to include importing the npm module but this didn't work

import { useEffect } from 'react'

/**
 * Detects of jellyBlock is enabled
 * @param adBlockDetected What to do when jellyBlock is detected
 */
export default function(adBlockDetected) {
  useEffect(() => {
    if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
      // If this is the case, it means that something tries to usurp are identity
      // So, considering that it is a detection
      adBlockDetected();
    } else {
      // Otherwise, you import the script FuckAdBlock
      (async () => {
        
        var importFAB = document.createElement('script');
        importFAB.onload = function() {
          // If all goes well, we configure FuckAdBlock
          fuckAdBlock.onDetected(adBlockDetected)
          // fuckAdBlock.onNotDetected(adBlockNotDetected);
        };
        importFAB.onerror = function() {
          // If the script does not load (blocked, integrity error, ...)
          // Then a detection is triggered
          adBlockDetected(); 
        };
        importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
        importFAB.crossOrigin = 'anonymous';
        try{
          import("fuckadblock").then((fab) => {
            importFAB.src = fab
          }).catch(
            adBlockDetected()  
          ) //'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
        }catch{
          adBlockDetected()
        }
  //      importFAB.src = await import("fuckadblock")//'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
        document.head.appendChild(importFAB);
          
      })

    }
  }, [])
}

回答1:

This is most likely that the script location is wrong or not being served.

One way to rectify would be to import("fuckadblock") using npm i fuckadblock:

import { useEffect } from 'react'

/**
 * Detects of adBlock is enabled
 * @param adBlockDetected What to do when adBlock is detected
 */
let detected = false;
export default function(adBlockDetected) {
  useEffect(() => {
    if(detected) {
      adBlockDetected();
      return;
    }
    if((typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined')) {
      // If this is the case, it means that something tries to usurp are identity
      // So, considering that it is a detection
      adBlockDetected();
    } else {
      (async () => {
        try {
          const fadblock = await import("fuckadblock");
          if(typeof fuckAdBlock === 'undefined' || typeof FuckAdBlock === 'undefined')
            adBlockDetected()
          else
            fuckAdBlock.onDetected(adBlockDetected);
        } catch {
          adBlockDetected();
        }
      })();
    }
  }, []);
}

来源：https://stackoverflow.com/questions/63145701/document-createelementscript-onerror-always-executes-with-local-fuckadbloc

标签

javascript

reactjs

gatsby

adblock