Javascript &引用；document.createElement（'；script'；）.onError"；始终使用本地fuckadblock脚本执行，但不使用cdnjs.cloudflare.com上的相同脚本

背景

我有一个可以使用的钩子。这是钩子的代码，它工作正常。当adblock开启时检测adblock，当adblock未开启时不检测adblock。它从服务器调用脚本，但我想存储脚本并在本地运行fuckadblock。我用的是盖茨比框架

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安装fuckadblock

。然后我更改

importFAB.src=https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';

to

importFAB.src='path/to/fuckadblock.js'

当我这样做的时候，看起来这个函数总是被执行的

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

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


我希望将脚本存储在本地，并且只有在实际启用adblock时才检测到adblock


更新

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

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

    }
  }, [])
}

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

一种纠正方法是使用npm i fuckadblock导入（“fuckadblock”）

：

从“react”导入{useffect}
/**
*检测adBlock是否启用
*@param adBlock检测到检测到adBlock时要执行的操作
*/
let=false；
导出默认功能（检测到adBlockDetected）{
useffect（（）=>{
如果（检测到）{
adBlockDetected（）；
返回；
}
if（（fuckAdBlock的类型！='undefined'| | fuckAdBlock的类型！=='undefined'））{
//如果是这样的话，那就意味着有东西试图篡夺你的身份
//因此，考虑到这是一种检测
adBlockDetected（）；
}否则{
（异步（）=>{
试一试{
const fadblock=等待导入（“fuckadblock”）；
如果（fuckAdBlock的类型=='undefined'| | fuckAdBlock的类型=='undefined'）
adBlockDetected（）
其他的
fuckAdBlock.onDetected（检测到adBlockDetected）；
}抓住{
adBlockDetected（）；
}
})();
}
}, []);
}

这对我不起作用。即使Adblock处于启用状态，使用此解决方案也不会检测到Adblock。@Sam，我更新了关于Adblock何时可能没有破坏请求但发送了一个空文件的答案（还添加了日志以查看发生了什么情况）（还修复了一个自动更正的打字错误）@EliasSchablowski您使用实际部署测试过此代码吗？这肯定不会按原样工作，除非Sam将其绑定器设置为按照代码的预期方式执行延迟加载样式导入work@EliasSchablowski是的，我测试了它，这个新的解决方案看起来产生了同样的问题；但是，我注意到，如果我将变量名

adBlockDetected

更改为其他名称（例如

somethingadblockdettected

），请保存此文件，并允许热重新加载以重新加载页面，然后，无论我是否打开了广告拦截器，都将始终检测到adBlockoff@Sam虽然您可能希望将其设置为这样工作，但由于将其作为构建管道的一部分正确插入会更干净、更安全，因此从CDN下载并在运行时附加脚本标记应该可以工作，（假设useEffect正在正确处理，并且fab js文件可以在其尝试访问的相对位置访问）。您是否检查了开发人员控制台中的“网络”选项卡，以确保它确实在请求fab js文件，并使用了实际存在的路径？我建议使用并替换

.src=https://cdnjs...

使用

.src='./fab.js'

并将

fuckadblock.min.js

下载到

static/fab.js

。这将更容易，因为fab依赖于副作用来完成它的工作。你可以让导入工作，但它更复杂；你可能必须使用

窗口。fuckAdBlock=false

变量并手动实例化。我自己不使用盖茨比，所以我不能真正为你创建一个工作演示。尽管我看不出有任何理由使用上述命令nt不应该工作。盖茨比使用带有静态文件夹的webpack，配置为公共资产，所以它应该可以工作，但我不能自己测试它，直到我建立了一个盖茨比项目来亲自查看。我稍后会做，如果你仍然不明白的话，我会为你发布一个演示。