how to create iframe inside multiple tags using JavaScript?

Question

Here I want to insert iframe inside ins tag using JavaScript... here is the code that I am trying but its creating two iframes in side single ins tag.... here is the ins

<ins class="e120x600" id="120x600"></ins>
<ins class="e120x600" id="120x600"></ins>

Here is the JavaScript

<script>
  elem = document.querySelectorAll('.e120x600');
  for (let i = 0; i < elem.length; i++) {
    var size = elem[i].id
    var str = size.substring(size.indexOf("x") + 1);
    var H = str.replace('x', '');
    var str = size.substring(0, size.indexOf('x'));
    var W = str.replace('x', '');

    var e = document.createElement('iframe');
    elem[i].appendChild(e);
    g = e.style;
    e.scrolling = "no";
    e.frameBorder = 0;
    e.id = "ifrm";
    e.allow = "autoplay";
    e.id = "ifrm";
    e.width = W;
    e.height = H;
    g.border = 0;
    g.overflow = "hidden";

  }
</script>

see this for more info: stackoverflow.com/questions/48240240/… — Asaf
– Asaf, Commented Sep 29, 2020 at 12:04
i would avoid to assign the same id attribute to more than one iframe — fedeghe
– fedeghe, Commented Sep 29, 2020 at 12:47

Asaf · Accepted Answer · 2020-09-29 13:39:33Z

1

You got 2 elements with same id id="120x600", following that I've changed this

var size = elem[i].id

To this:

var size = elem[i].className.replace("e", "");

And now it seems to be working fine.

In the same matter- from fedeghe comment, I've changed this:

e.id = "ifrm";

To be unique like so:

e.id = "ifrm" + i;

elem = document.querySelectorAll('.e120x600');
for (let i = 0; i < elem.length; i++) {
    var size = elem[i].className.replace("e", "");
    var str = size.substring(size.indexOf("x") + 1);
    var H=  str .replace('x','');
    var str = size.substring(0, size.indexOf('x'));
    var W=  str .replace('x','');

    var e = document.createElement('iframe');
    elem[i].appendChild(e);
                    g = e.style;
                    e.scrolling = "no";
                    e.frameBorder = 0;
                    e.id = "ifrm";
                    e.allow = "autoplay";
                    e.id = "ifrm" + i;
                    e.width = W;
                    e.height = H;
                    g.border = 0;
                    g.overflow = "hidden";

}

iframe{
  background: green;
}

<ins class="e120x600" id="120x601"></ins>
<ins class="e120x600" id="120x602"></ins>

edited Sep 29, 2020 at 13:39

answered Sep 29, 2020 at 12:03

Asaf

1,59211 silver badges17 bronze badges

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

2 Comments

fedeghe Over a year ago

even here i would avoid to assign the same id attribute to more than one iframe

Yash Meena Over a year ago

okay now here is the tricky part if the javascript is called from an url like<ins class="e120x600" id="120x601"></ins> <script async src="//localhost/js/js.js"></script>.......<ins class="e120x600" id="120x602"></ins><script async src="//localhost/js/js.js"></script> it will create 2 iframe with in the tag,in total four iframe..how to fix that..?

Collectives™ on Stack Overflow

how to create iframe inside multiple tags using JavaScript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related