Remove iframe script tag using ONLY JavaScript

Question

I'm having an auto-generated iframe (Which also have a class name and on the same domain), inside it, there is also a <script> tag and some styling. Can anyone tell me how to remove the script tag and its contents using pure javascript? [NO jQuery please, Using VueJS ]

<html>
<body>
    <iframe src="#" class="myiframe">
        #document
        <html>
            <body>

                <!-- REMOVE-->
                <style>...</style>
                <!-- REMOVE-->

                <div class="wrapper">...</div>
            </body>
        </html>
    </iframe>
</body>
</html>

I know how to select the script tag (Might not perfect for the purpose), What I don't know is how to select the style tag which is inside of an iframe:

var element = document.getElementsByTagName("style"), index;

for (index = element.length - 1; index >= 0; index--) {
    element[index].parentNode.removeChild(element[index]);
}

@Code_Ninja Possible with JQuery, I've seen Q & A on StackOverflow. Why not with Javascripts ? — stackminu
– stackminu, Commented Feb 13, 2019 at 8:49
yes I have just got an approach, let try and share you the solution — Code_Ninja
– Code_Ninja, Commented Feb 13, 2019 at 8:49

Code_Ninja · Accepted Answer · 2019-02-13 09:01:00Z

2

You can try to use the following code, this code might be lengthy, lets try and optimize that:

<html>

  <head>
    <script>
      function removeStyleTag() {
        var iframe = document.getElementById("myFrame");
        var styleTag = iframe.contentWindow.document.getElementsByTagName("style");

        for (var index = styleTag.length - 1; index >= 0; index--) {
          styleTag[index].parentNode.removeChild(styleTag[index]);
        }
      }

    </script>
  </head>

  <body>
    <iframe id="myFrame" src="#" class="myiframe">
        #document
        <html>
            <body>

                <!-- REMOVE-->
                <style>...</style>
                <!-- REMOVE-->

                <div class="wrapper">...</div>
            </body>
        </html>
    </iframe>
    <button onclick="removeStyleTag()">Try It</button>
  </body>

</html>

I have found a reference from this link.

I have just added the following 2 lines in addition to the code that you have written:

var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");

Here is a link to Fiddle where I have tried this code.

answered Feb 13, 2019 at 9:01

Code_Ninja

1,8771 gold badge19 silver badges39 bronze badges

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

9 Comments

stackminu Over a year ago

Awesome, It worked. Anyhow the iframe doesn't had a ID, I used getElementsByClassName("myiframe")[0] and it worked! Any way to optimize it since this iframe only contain one style tag (Select the first, maybe?)

Pingolin Over a year ago

It doesn't work for me, your styleTag is an empty HTMLCollection.

Code_Ninja Over a year ago

@Armel, if you are trying to use it here on stackoverflow, this error would come up, because I guess that stackoverflow restricts external source to run iFrame here. But try this in fiddle, and it will work.

Code_Ninja Over a year ago

@stackminu, yes that can be the thing, it will be converted into a generic code, but the code length would increase, can do that.. that's a good option

Code_Ninja Over a year ago

Try this in incognito or clear cache, can be due to that, works for me and @stackminu everytime

|

Collectives™ on Stack Overflow

Remove iframe script tag using ONLY JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related