javascript - 当我在页面已经加载后加载脚本时重新初始化 dom

Question

在我的页面上，我阻止了脚本并希望在按下按钮后加载它们。

以 google recaptcha 为例，这已经很有效了。

当我运行 myFunction 时，脚本被加载。

同样适用于 jquery 和 popper.js

但我认为要使用 bootstrap 下拉菜单我不需要重新初始化它。有没有办法解决这个问题？我找不到任何相关信息。

代码如下:

    <script>
        function blockScript(origin) {
            const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
            if (scripts.length > 0) {
                scripts.forEach((script) => {
                    if (script.src.includes(origin)) {
                        script.setAttribute('data-src', script.src);
                        script.removeAttribute("src");  
                    }
                })
            }
        }
    </script>
    <script>

      var json = [
{
    "name" : "Google Recaptcha", 
    "url"   : "code.jquery.com",
    "desc" : "Recaptcha",
    "rights": ""
},
{
    "name" : "Google Recaptcha", 
    "url"   : "www.google.com",
    "desc" : "Recaptcha",
    "rights": ""
},
{
    "name" : "Google Recaptcha", 
    "url"   : "cdnjs.cloudflare.com",
    "desc" : "Recaptcha",
    "rights": ""
}];
      if(!localStorage.getItem('cc-marketing') == 1){
            const observer = new MutationObserver((mutationsList, observer) => {
                for(let mutation of mutationsList) {
                    const addedNodes = Array.from(mutation.addedNodes);
                    if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
                      for(var i = 0; i < json.length; i++) {
        var obj = json[i];
        blockScript(obj.url);
    }
                    }
                }
            });

            observer.observe(document, { childList: true, subtree: true });
              }
    </script>

<script>
function myFunction() {
 // window.localStorage.setItem('cc-marketing', 1);
var elements = document.querySelectorAll("[data-src]");

Object.keys(elements).forEach(function(key) {
  console.log(elements[key].getAttribute('data-src'));
  elements[key].setAttribute('src', elements[key].getAttribute('data-src'));
  elements[key].removeAttribute("data-src");  
});
}
</script>

<script  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://www.google.com/recaptcha/api.js?render=MYKEY"></script>

Answer 1

问题不在于刷新 dom。当您加载脚本时，它会将任何监听器添加到您已经加载的 dom，因此它可以正常工作。

错误在于您的 bootstrap.min.js 在 popper.min.js 之前加载，因为您阻止了 popper 但没有阻止 bootstrap。根据 bootstrap 文档，bootstrap.min.js 需要最后加载。 (依赖项)。只需将 bootstrap.min.js 添加到您的 json 中以阻止它，它就会起作用。

   <script>
        function blockScript(origin) {
            const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
            if (scripts.length > 0) {
                scripts.forEach((script) => {
                    if (script.src.includes(origin)) {
                        script.setAttribute('data-src', script.src);
                        script.removeAttribute("src");  
                    }
                })
            }
        }
    </script>
    <script>

      var json = [
{
    "name" : "Google Recaptcha", 
    "url"   : "code.jquery.com",
    "desc" : "Recaptcha",
    "rights": ""
},
{
    "name" : "Google Recaptcha", 
    "url"   : "www.google.com",
    "desc" : "Recaptcha",
    "rights": ""
},
{
    "name" : "Google Recaptcha", 
    "url"   : "cdnjs.cloudflare.com",
    "desc" : "Recaptcha",
    "rights": ""
},
{
    "name" : "Bootstrap", 
    "url"   : "stackpath.bootstrapcdn.com",
    "desc" : "Bootstrap",
    "rights": ""
}];
      if(!localStorage.getItem('cc-marketing') == 1){
            const observer = new MutationObserver((mutationsList, observer) => {
                for(let mutation of mutationsList) {
                    const addedNodes = Array.from(mutation.addedNodes);
                    if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
                      for(var i = 0; i < json.length; i++) {
        var obj = json[i];
        blockScript(obj.url);
    }
                    }
                }
            });

            observer.observe(document, { childList: true, subtree: true });
              }
    </script>

<script>
function myFunction() {
 // window.localStorage.setItem('cc-marketing', 1);
var elements = document.querySelectorAll("[data-src]");

Object.keys(elements).forEach(function(key) {
  console.log(elements[key].getAttribute('data-src'));
  elements[key].setAttribute('src', elements[key].getAttribute('data-src'));
  elements[key].removeAttribute("data-src");  
});
}
</script>

<script  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://www.google.com/recaptcha/api.js?render=MYKEY"></script>