Remove iframe with javascript

Question

I am trying to remove iFrame tags in my documents. This is the function. But it don't seem to work. Here is my sample code

<script>
function removeiframe() {
            alert("Hello Lovely World");
            var markup = document.body.innerHTML;
            
            var filtered=markup.replace(/(<iframe.*?>.*?<\/iframe>)/g,"");
            alert("he: " + markup);
//markup = Regex.Replace(markup, @"<script.*?/script>", "", RegexOptions.IgnoreCase);
//markup = Regex.Replace(markup, @"<iframe.*?/iframe>", "", RegexOptions.IgnoreCase);
markup = filtered;
document.body.innerHTML = markup + "<hr><hr>HELLO";
        }
</script>
<body onload="removeiframe()">
    
        <iframe marginheight="0" src="http://www.hotelanswer.com" marginwidth="0" frameborder="0" height="180" scrolling="no" width="210"></iframe><br>
</body>

MattDiamant · Accepted Answer · 2016-02-12 20:15:18Z

33

Here's a script you can run that will remove all the iframes from your document. Here's an example of this working: http://jsfiddle.net/5hh9H/

var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
    iframes[i].parentNode.removeChild(iframes[i]);
}

edited Feb 12, 2016 at 20:15

answered Feb 27, 2013 at 3:23

MattDiamant

8,8394 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

s.ermakovich Over a year ago

this code doesn't work properly if there is more than one iframe, since iframes in this case is a live collection, which updates as long as we remove iframes from the document

MattDiamant Over a year ago

@s.ermakovich I don't think that's necessarily correct, but I changed it to a static collection anyways.

user613826 · Accepted Answer · 2019-01-13 12:34:42Z

10

Pure Javascript code:

document.querySelectorAll('iframe').forEach(
  function(elem){
    elem.parentNode.removeChild(elem);
});

answered Jan 13, 2019 at 12:34

user613826

1111 silver badge5 bronze badges

Comments

Georgii Gonchar · Accepted Answer · 2013-02-27 06:24:20Z

7

You didn't mention why you need to remove iframes in the document.

I do it in order to prevent Clickjacking attack. But it will work in any cases.

You need this:

<style id="defendClickjack" type="text/css">body{display:none;}</style>

and then

<script type="text/javascript">
    if (self === top) {
        var defendClickjack = document.getElementById("defendClickjack");
        antiClickjack.parentNode.removeChild(defendClickjack);
    }
    else {
        top.location = self.location;
    }
</script>

You can find more information here:

answered Feb 27, 2013 at 6:24

Georgii Gonchar

4462 silver badges4 bronze badges

Comments

Mike Ciffone · Accepted Answer · 2021-04-16 18:11:27Z

Slight improvement here to Matt's original example if you want to only do it on mobile. For me, the use case was that I'm using a Vimeo embed on my site to create a video background. I needed to ditch the video on mobile for performance. This does the job.

$( document ).ready(function() {      
    let isMobile = window.matchMedia("only screen and (max-width:650px)").matches;
        if (isMobile) {
            var iframes = document.querySelectorAll('iframe');
            for (var i = 0; i < iframes.length; i++) {
            iframes[i].parentNode.removeChild(iframes[i]);
            }
        }
    });

s.ermakovich's comment about code not working properly with more than one iframe is not 'wrong' but a bit misleading...and depends on the situation. My Vimeo iFrame had a child frame making requests that continued after DOM complete. Matt's code did destroy both.

In my case my 2nd iframe was a direct child of the parent. The code might not work if you have several iframes on a page that are not direct children of the same parent and you just copy and paste that code. In this case you need to be more specific:

If you have multiple iFrames on your page you can add specificity to your query selector. Your choice if you want to use querySelectorAll() or not based on the situation, but I see no reason why querySelector() can't be used either.

document.querySelector(".foo > bar iframe")
document.querySelector("foo bar > iframe")

If you have a grid of iframes, perhaps several embedded videos in a row perhaps

document.querySelectorAll("foo > .bar > iframe")

or maybe better from the same data source...

document.querySelectorAll("iframe[data-src]")

Someone please correct me if I'm wrong somewhere

Leo · Accepted Answer · 2013-02-27 03:34:26Z

1

You should put the iframe inside of a div element.

<div id="kk">
  //your iframe
</div>

Then use jQuery to remove the iframe.

$('#kk').click(function(){
   $(this).html("");
});

This is a possible solution.

edited Feb 27, 2013 at 3:34

user1585455

answered Feb 27, 2013 at 3:20

Leo

5252 gold badges4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Remove iframe with javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related