reinitialize dom when i load a script after the page already loaded

Question

On my page, I block scripts and wanna load them after I pressed a button.

this already works wonderful with as example google recaptcha.

when i run myFunction the script is loaded.

the same goes for jquery and popper.js

But I think to use the bootstrap dropdown I need no reinitialize it. Is there a way to this for the hole dom? I can't find anything about it.

Here is the code:

    <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

The problem is not with refreshing the dom. When you load the script, it will add whatever listeners to your dom which is already loaded so it works fine.

What is wrong is that your bootstrap.min.js is loaded before your popper.min.js because you blocked popper but not bootstrap. According to the bootstrap documentation, bootstrap.min.js needs to be loaded last. (dependencies). Just add bootstrap.min.js to your json to block it as well, and it will work.

   <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>