0

An advertiser inserts an iframe on my website in the Dom via an external script. The content of the iframe takes a long time to load the browser. I want, that as soon as the iframe appears in the dom, the iframe is removed again. The iframe has no ID.

My solution so far is setInterval. I check a total of 10 times at intervals of 600ms whether the iframe has been inserted and if so, then remove the iframe and stop the interval. I dont like working with setInterval for performance issues and would rather use addeventlistener or mutationobserver but it doesn't work.

This is what I have at the moment and it works:

var removeRun = 0;
  intervalremove = setInterval(function () {
    removeRun += 1;
    if (removeRun === 10) {
      clearInterval(intervalremove);
    }
    
    
    if($("iframe[src*='//ad.adserver.cy']").length == 1) {
    console.log('dom contains adserver iframe');
 
    $("iframe[src*='//ad.adserver.cy']").remove();

    clearInterval(intervalremove);

    console.log('iframe removed / interval stoped');
    }
    
    
  }, 600);

I already searched for mutation and addeventlistener and found many sites. e.g. B.

Is there a JavaScript / jQuery DOM change listener?

So far I haven't managed to build any code that works. Thanks for your help.

Here is one of the hundreds mutationobserver codes I tried

   // Select the node that will be observed for mutations
  var target = 
 document.querySelector("iframe[src*='csync.smartadserver.com']");

 // Create an observer instance
 var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
   var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added

    console.log('iframe found');

    });
   }
  });    
  });

  // Configuration of the observer:
var config = { 
   attributes: true, 
   childList: true, 
   characterData: true 
  };

 // Pass in the target node, as well as the observer options
observer.observe(target, config);

// Later, you can stop observing
observer.disconnect();
Lars Vegas
  • 221
  • 2
  • 10
  • Can you share your mutation observer code and why it didn't work? – Azarro Dec 24 '22 at 11:31
  • I have no idea why it did not work. I think I have no clue how to detect the src and what exaclty I need from the MutationObserver. I found so many MutationObserver codes and none of them work. – Lars Vegas Dec 24 '22 at 11:34
  • I have added a mutationsobserver code. My wife and my kids already hate me, that I sit in the office on christmas :(. I thought this is an easy thing in jquery or javascript but now I am sitting 7 days on this issue :( – Lars Vegas Dec 24 '22 at 11:43
  • maybe try to add `subtree: true,` in the config and of course make sure that `target` actually got the element correctly with that selector. And needless to say don't disconnect the observer at that point where you showed in the code. But there's the chance that the mutation might not happen there.. so just monitor the whole document and supposedly any mutation will be that one you are looking for – Diego D Dec 24 '22 at 11:46
  • Thank you very much. At first I think, that my target is wrong. Is document.querySelector("iframe[src*='csync.smartadserver.com']"); correct? I just want to have a look for the iframe src. – Lars Vegas Dec 24 '22 at 11:51

0 Answers0