" document.createElement('script').onError"始终使用本地fuckadblock脚本执行，但不使用cdnjs.cloudflare.com上的相同脚本执行

问题描述

背景

我有一个使用 fuckadblock 的钩子.这是该钩子的代码，它可以正常工作.当adblock启用时，它将检测adblock；而当adblock未启用时，则不会检测到adblock.它从服务器调用脚本，但是我想存储脚本并在本地运行fuckadblock.我正在使用Gatsby框架.

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);
    }
  }, [])
}

---

问题

我尝试将脚本复制到https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js，并将其保存到本地文件并使用npm install fuckadblock.然后将importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';更改为importFAB.src = 'path/to/fuckadblock.js';

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(); 
      };

这意味着无论adblock是打开还是关闭，它都会检测到adblock处于打开状态.

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

我想将脚本存储在本地，并且仅在实际启用adblock的情况下才检测到adblock.

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

更新

我尝试更新脚本以包括导入npm模块，但这不起作用

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);
          
      })

    }
  }, [])
}

推荐答案

这很可能是脚本位置错误或未提供.

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

一种纠正方法是使用npm i fuckadblock到import("fuckadblock"):

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();
        }
      })();
    }
  }, []);
}

这篇关于" document.createElement('script').onError"始终使用本地fuckadblock脚本执行，但不使用cdnjs.cloudflare.com上的相同脚本执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！